Я просматриваю страницу MDC для правила CSS @ font-face , но ничего не понимаю. У меня есть отдельные файлы для жирного , курсив и жирный + курсив . Как я могу встроить все три файла в одно @font-face
правило? Например, если у меня есть:
@font-face {
font-family: "DejaVu Sans";
src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
font-family: "DejaVu Sans";
font-weight: bold;
}
Браузер не будет знать, какой шрифт будет использоваться для жирного шрифта (потому что этот файл - DejaVuSansBold.ttf), поэтому он по умолчанию будет использовать то, что я, вероятно, не хочу. Как я могу сообщить браузеру все варианты, которые у меня есть для определенного шрифта?
Ответы:
Похоже, решение состоит в добавлении нескольких
@font-face
правил, например:Кстати, может показаться, что Google Chrome не знает об этом
format("ttf")
аргументе, поэтому вы можете пропустить это.(Этот ответ был верным для спецификации CSS 2. CSS3 допускает только один стиль шрифта, а не список через запятую.)
источник
font-style: italic, oblique;
чтобы просто,font-style: italic;
казалось, все исправить.Начиная с CSS3, спецификация изменилась, допуская только одну
font-style
. Список через запятую (для CSS2) будет обрабатываться так, как если бы он был,normal
и переопределял любую более раннюю (по умолчанию) запись. Это сделает шрифты, определенные таким образом, постоянно выделенными курсивом.В большинстве случаев курсив, вероятно, будет достаточным, и правила в случае косых символов не понадобятся, если вы позаботитесь о том, чтобы определить, что вы будете использовать, и придерживаться его.
источник
I have separate files for bold, italic and bold + italic
- так что есть три разных файла. Этот ответ исправляет принятый в том, чтоfont-style: italic, oblique;
он больше не действителен, но также этот ответ использовал тот же файл для курсива и косой. Тем не менее, стоит отметить, что файл является общим в двух случаях.Для правильной работы варианта шрифта мне пришлось изменить порядок @ font-face в CSS.
источник
в настоящее время, 2017-12-17. Я не нахожу описание необходимости Font-property-order в спецификации . И я тестирую в chrome всегда работает в любом порядке.
источник
Если вы используете шрифты Google, я бы предложил следующее.
Если вы хотите, чтобы шрифты запускались с вашего локального хоста или сервера, вам нужно скачать файлы.
Вместо загрузки пакетов ttf в ссылках для загрузки используйте предоставленную ими прямую ссылку, например:
Вставьте URL в ваш браузер, и вы должны получить объявление шрифта, похожее на первый ответ.
Откройте предоставленные URL-адреса, загрузите и переименуйте файлы.
Прикрепите обновленные объявления шрифтов с относительными путями к файлам woff в вашем CSS, и все готово.
источник
источник
Не забывайте, что для жирного варианта это так
font-weight
; для курсивного варианта этоfont-style
источник
@font-face
поэтому я пытаюсь понизить этот ответ (но не могу, мне не хватает репутации)