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

ProgramBox

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

Post author:admin
Запись опубликована:18 мая, 2023
Post category:Вопросы по программированию

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Основная проблема заключалась в том, что шрифт отображался не так, как должен, хотя все было подключено правильно. Мне удалось найти исходный код в 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>

1. Вы не можете связать шрифты с веб-страницей, используя <link rel="stylesheet"> элемент и предоставляя ttf-файл. Шрифт должен быть импортирован с использованием обычной таблицы стилей с @font-face определением, а затем использован в определении стиля.

Ответ №1:

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

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

 @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

Ответ №2:

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

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

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

1. Спасибо за ваши ответы, но, к сожалению, это не помогло с этим шрифтом. Я исправил все, что вы посоветовали в style.css, и удалил ссылку в index.html Возможно, шрифт является каким-то пользовательским и обычный способ здесь не подходит. После редактирования я почистил файлы в кэше, это также не дало результатов.

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

3. В консоли отображается следующее: «Ресурс, интерпретируемый как таблица стилей, но переданный с использованием MIME-типа application / octet-stream: «файл:///Users/aleksey/Downloads/Abu/fonts/VoyaNui_1.15_4.ttf».»

4. Так вот, это просто бессмыслица. Он не должен хотеть интерпретировать его как таблицу стилей. Не могли бы вы, пожалуйста, опубликовать обновление с вашим текущим кодом?

5. Для меня все выглядит нормально. Глупый вопрос: Ваш файл .ttf ДЕЙСТВИТЕЛЬНО является файлом ttf, или это, как следует из сообщения об ошибке, на самом деле таблица стилей, которая содержит определения стилей? Т.е. можете ли вы открыть файл .ttf в блокноте и проверить, является ли он на самом деле двоичным или это текст?

Ответ №3:

Вам нужно сгенерировать шрифты с помощью онлайн-генератора веб-шрифтов и после генерации шрифтов поместить сгенерированные шрифты woff и woff2 в вашу папку fonts.

 @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');
}