Почему мой стиль для импорта внешнего шрифта не работает

Question

Почему следующее <style> не меняет мой шрифт на "Computer Modern Typewriter"?

URL-адрес эффективен.

<style type="text/css">
    @font-face {
        font-family: 'Computer Modern Typewriter';
        src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmuntt.otf');
        font-weight: normal;
        font-style: normal;
    }

    body {
        font-size: 1em;
        font-family: 'Computer Modern Typewriter'
    }
</style>

Answer 1

Ссылка, которую вы предоставили, не поддерживает HTTPS, поэтому, если ваш сайт имеет HTTPS-соединение и заголовки, которые ограничивают доступ к незащищенному HTTP, это может быть проблемой.

Кроме того, OpenType теперь не очень подходит для веба, вы можете использовать версию одного шрифта WOFF или WOFF2.Я нашел один здесь: https://github.com/dreampulse/computer-modern-web-font. Используйте это так:

@font-face {
	font-family: 'Computer Modern Typewriter';
	src: url('cmuntt.eot');
	src: url('cmuntt.eot?#iefix') format('embedded-opentype'),
		 url('cmuntt.woff') format('woff'),
		 url('cmuntt.ttf') format('truetype'),
		 url('cmuntt.svg#cmuntt') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Computer Modern Typewriter';
	src: url('cmuntb.eot');
	src: url('cmuntb.eot?#iefix') format('embedded-opentype'),
		 url('cmuntb.woff') format('woff'),
		 url('cmuntb.ttf') format('truetype'),
		 url('cmuntb.svg#cmuntb') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Computer Modern Typewriter';
	src: url('cmunit.eot');
	src: url('cmunit.eot?#iefix') format('embedded-opentype'),
		 url('cmunit.woff') format('woff'),
		 url('cmunit.ttf') format('truetype'),
		 url('cmunit.svg#cmunit') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Computer Modern Typewriter';
	src: url('cmuntx.eot');
	src: url('cmuntx.eot?#iefix') format('embedded-opentype'),
		 url('cmuntx.woff') format('woff'),
		 url('cmuntx.ttf') format('truetype'),
		 url('cmuntx.svg#cmuntx') format('svg');
	font-weight: bold;
	font-style: italic;
}

Answer 2

Я думаю, что это не проблема OTF, это с URL http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmuntt.otf Хотя это доступно, но это не HTTPS, и браузер не загружает его.Я сохранил копию в GitHub, а затем применил тот же стиль (с заменой URL на новый https URL).Это сработало!

Answer 3

Возможно, потому что это шрифт OTF.

Вы должны получить или создать другие форматы шрифта - вам в основном нужен формат WOFF для веб-сайтов.

Если шрифт позволяет (в отношении авторского права), вы можете создать его здесь: https://www.fontsquirrel.com/tools/webfont-generator

Answer 4

Просто .otf недостаточно.Вы также должны добавить другие форматы .. отметьте здесь .Для вашего удобства просто нажмите кнопку проверки шрифта и необходимые форматы будут доступны.Также отметьте здесь как добавить несколько src для font-face.

Answer 5

Вы можете использовать этот CSS

        @font-face {
            font-family: "Computer Modern";
            src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf');
        }        
        @font-face {
            font-family: "Computer Modern";
            src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsx.otf');
            font-weight: bold;
        }        
        @font-face {
            font-family: "Computer Modern";
            src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsi.otf');
            font-style: italic, oblique;
        }        
        @font-face {
            font-family: "Computer Modern";
            src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbxo.otf');
            font-weight: bold;
            font-style: italic, oblique;
        }        
        body {
            font-family: "Computer Modern", sans-serif;
        }