Моя проблема - загрузить шрифт на веб-сайт. - PullRequest
Новая
       2

Моя проблема - загрузить шрифт на веб-сайт.

1 голос
/ 09 марта 2019

Основная проблема заключалась в том, что шрифт отображался не так, как должен, хотя все было подключено правильно. Мне удалось найти источник в html и css, где показано, как использовать этот шрифт, и он начал появляться так, как должен. Единственное предложение относительно того, почему шрифт не работал, - то, что этот шрифт в формате ttf не работает в сети.

Спасибо всем за помощь! 

/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
font-family: 'Voya Nui';
font-style: normal;
font-weight: normal;
src: local('Voya Nui'), url('VoyaNui_1.15_4.woff') format('woff');
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css"
          href="style.css"/>
</head>

<body>

<h1 style="font-family:'Voya Nui';font-weight:normal;font-size:65px">018.0204  BIOLOGICAL CHRONICLE</h1>


</body>
</html>

Ответы [ 3 ]

1 голос
/ 09 марта 2019

Вы не можете сделать <link rel="stylesheet" href="fonts/VoyaNui_1.15_4.ttf">.

Вам нужно использовать @ font-face в CSS или стиле. 

@font-face {
  font-family: 'VoyaNui';
  src:   url('./fonts/VoyaNui_1.15_4') format('woff2'),
    url('./fonts/VoyaNui_1.15_4') format('woff'),
    url('./fonts/VoyaNui_1.15_4') format('ttf');
}

Еще одна вещь,Я использую woff и woff2, потому что он имеет хорошее сжатие, но будьте осторожны с некоторыми браузерами (IE).

См. В caniuse https://caniuse.com/#search=woff и https://caniuse.com/#search=woff2

0 голосов
/ 11 марта 2019

Вам необходимо сгенерировать шрифты из онлайн-генератора веб-шрифтов, и после генерации шрифтов поместите сгенерированные шрифты woff и woff2 в папку шрифтов. 

@font-face {
    font-family: 'VoyaNui';
    src: url(./fonts/VoyaNui_1.15_4) format('ttf'), url(./fonts/VoyaNui_1.15_4) format('woff'), url(./fonts/VoyaNui_1.15_4) format('woff2');
}
0 голосов
/ 09 марта 2019

Если ваша вставленная таблица стилей имеет значение styles.css, добавьте определение шрифта перед правилом body: 

@font-face {
    font-family: 'VoyaNui',
    src: url('fonts/VoyaNui_1.15_4.ttf');
}
body {
    font-family: 'VoyaNui';
}

Затем удалите <link> для шрифта, он не будет работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...