Пользовательский шрифт (fontface) не работает при публикации - PullRequest
Новая
       20

Пользовательский шрифт (fontface) не работает при публикации

0 голосов
/ 05 апреля 2019

У меня есть собственный шрифт в моем CSS.Это работает на локальной странице, но не когда я публикую сайт на сервере.Вот мой css: 

 @font-face{ 
font-family: 'Font-Example';
src: url('example.eot');
src: url('example.eot?#iefix') format('embedded-opentype'),
     url('example.woff') format('woff'),
     url('example.ttf') format('truetype'),
     url('example.svg#webfont') format('svg');
 }
 #kay { font-family: 'Font-Example', Arial;
    font-weight: normal;
    font-size: 18px;}

и мой html: 

 <span id="kay">Font Example</span>

Я пытался открыть опубликованный сайт в нескольких браузерах, ни один из них не работает.Я что-то упустил, или это просто не поддерживается, несмотря ни на что?

Ответы [ 3 ]

0 голосов
/ 05 апреля 2019

Чтобы встроить выбранные шрифты в веб-страницу, просмотрите следующий пример HTML-кода.Кроме того, если вы хотите импортировать нет.из хороших шрифтов, то я рекомендую использовать https://fonts.google.com

<!DOCTYPE html>
<html>
<head>
<style> 
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Fascinate+Inline');

#kay {
    font-family: 'Fascinate Inline', cursive;
    font-size:26pt;
}
</style>
</head>
<body>
<p style="font-family: 'Raleway', serif;">Write Your Beautiful Texts Here</p>


<span id="kay">Your Font Example</span>
</body>
</html>

Если вам все еще нужны рекомендации, прочитайте эту полезную статью https://developers.google.com/fonts/docs/getting_started

0 голосов
/ 05 апреля 2019

Глядя на ваш код, я могу придумать два варианта:

  1. Согласно коду CSS, файлы example.eot, example.woff, example.ttf y example.svg должны находиться в том же каталоге файла CSS, а не в HTML.
  2. Если вы работаете с IIS, вам необходимо настроить файл web.config.

Код для файла web.config должен идти в тег staticContent.

Пример: 

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject"/>
            <mimeMap fileExtension=".woff" mimeType="application/font-woff"/>
            <mimeMap fileExtension=".ttf" mimeType="application/x-font-truetype"/>
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
            <mimeMap fileExtension=".otf" mimeType="application/x-font-opentype"/>
        </staticContent>
    </system.webServer>
</configuration>
0 голосов
/ 05 апреля 2019

Если шрифт работает локально, но не на сервере, вам необходимо проверить путь к файлу шрифта.Проверьте страницу, проверьте, что она говорит вам путь местоположения, сравните его с фактическим путем местоположения, и вы должны найти свою проблему!

...