Настройка шрифта с несколькими стилями

Question

У меня возник вопрос о создании семейства шрифтов Roboto (несколько стилей) на нашем локальном сервере. Мы не можем ссылаться на внешнюю службу для этих стилей.

Я искал и читал тонну статей и много пробовал, но до сих пор не получил работу для меня. Я уверен, что это просто, что мне не хватает. Вот что у меня есть:

• настройки каталога:
  • HTML
    • CSS
    • шрифты
    • JS
    • sample.html

В папке «Шрифты» у меня есть папка «roboto» со всеми стилями в нескольких форматах. У меня также есть таблица стилей «roboto_stylesheet.css», в которой я объединил все атрибуты @ font-face для всех стилей в одном месте. Этот файл находится в папке «roboto» в шрифтах.

В моем документе sample.html у меня есть путь к «roboto_stylesheet.css» как <link href="fonts/roboto/roboto_stylesheet.css" rel="stylesheet">.

Я создал образец класса под названием «.div1», а другой - «.div2» с семейством шрифтов как «font-family: roboto_condensedbold;» и "font-family: roboto_condensedregular;" соответственно.

В теле я создал простого разработчика, который называет класс. Когда я иду на предварительный просмотр ... ничего.

Если я скопирую стиль @ font-face из «roboto_stylesheet.css» и поместил его в начало документа (при отключении ссылки на таблицу стилей), он превью отлично.

Как я уже сказал, я уверен, что я пропустил что-то простое, но не вижу его. Все мои дорожки выглядят хорошо для меня.

Надеюсь, это достаточно ясное объяснение, поскольку я не могу отправить ссылку, поскольку это противоречит политике.

Спасибо, Майкл

Answer 1

Когда вы объявляете свой шрифт в roboto_stylesheet.css вы должны иметь такой же код.

@font-face { 
    font-family: 'RobotoFont'; //use this name to set any text font 
    font-style: normal; 
    font-weight: 400; 
    src: local('Roboto'), local('Roboto'), url("<font path>.woff2") format('woff2'); 
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 
} 

Так .div1 будет выглядеть так:

.div1{ font-family: 'RobotoFont'; } 

Примечание: Вы можете проверить некоторые Google шрифты декларации here.

Редактировать Как я вижу в ваших комментариях, вы указываете в атрибуте src более одного url().Я не уверен, что это вызвало у вас проблемы, но вместо того, чтобы добавлять больше url() к тому же @font-face, вы должны объявить то же самое @font-face с таким же именем font-family и только изменить источник: url(). Как я уже сказал, я не уверен, что это решит проблему.

Edit 2: Также проверьте, что файлы шрифтов имели разрешение 755 или другое разрешение, так что они могут быть считаны и выполнены