используя размещенный на сервере шрифт otf на моей веб-странице - PullRequest
Новая
       60

используя размещенный на сервере шрифт otf на моей веб-странице

0 голосов
/ 21 июня 2019

На моей веб-странице можно использовать веб-шрифты Google. 

<link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600,700,300italic,400italic,600italic">

<div style="font-family: 'Source Code Pro';">My Text</div>

все в порядке, используя вот так. Но у меня на сервере размещен шрифт .otf, и я хочу использовать его на своей веб-странице, я пробовал использовать как 

 @font-face {
            font-family: 'MyFontName';
            src: url("https://www.mywebsitepage.com/fonts/MyHostedFont.otf") format("opentype");
        }

<div style="font-family: 'MyFontName';">My Text</div>

Но это не работает. Причина использования моего шрифта в том, что я не могу найти свой шрифт в бесплатных веб-шрифтах Google.

1 Ответ

0 голосов
/ 21 июня 2019

Что касается вашего образца, я надеюсь, что это не тот случай, когда вы действительно его используете. Я имею в виду, что у вас есть отдельный .css файл, который включает в себя декларацию font-face, и вы прикрепляете этот файл в head вашего документа или используете его как часть <style>...</style> конструкции, лучше также в head документа. Если да, то вы можете попытаться не использовать .otf, но вместо этого использовать .woff и .woff2.

Сейчас неправильно использовать .otf для веб-шрифтов. В настоящее время, если вам на самом деле не нужна поддержка старых версий IE (8 и ниже), вы можете просто загрузить шрифты в форматах .woff и .woff2 , которые удовлетворят ваши потребности. Как это: 

@font-face {
 font-family: "Open Sans";
 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Если у вас есть шрифт .otf, вы можете легко конвертировать его в форматы веб-шрифтов, используя некоторые онлайн-генераторы, такие как https://transfonter.org/ или аналогичные.

...