Как добавить несколько файлов шрифтов для одного и того же шрифта?

454

Я просматриваю страницу 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), поэтому он по умолчанию будет использовать то, что я, вероятно, не хочу. Как я могу сообщить браузеру все варианты, которые у меня есть для определенного шрифта?

Феликс
источник
В качестве дополнения к вопросу, используем ли мы эти шрифты в редакторах WYSIWYG, таких как TinyMCE, нам все еще нужен жирный курсив? Несмотря на то, что у TinyMCE есть кнопки для жирного курсива? Я предполагаю, что ответ ДА ​​- потому что они ищут эти файлы?
Nishant
Возможный дубликат Как объединить шрифты?
user2284570

Ответы:

749

Похоже, решение состоит в добавлении нескольких @font-faceправил, например:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

Кстати, может показаться, что Google Chrome не знает об этом format("ttf")аргументе, поэтому вы можете пропустить это.

(Этот ответ был верным для спецификации CSS 2. CSS3 допускает только один стиль шрифта, а не список через запятую.)

Феликс
источник
130
Порядок важен, жирный / курсив должен быть последним.
The Who
8
Стоит отметить, что это не работает в IE8 (и ниже), даже если вы используете EOT. IE загрузит альтернативную гарнитуру, но не будет ее использовать, вместо этого она выделит жирным шрифтом / курсивом обычную гарнитуру. Кроме того, похоже, что Chrome 11 не может отображать шрифт, выделенный жирным шрифтом и курсивом
JaffaTheCake
2
Этот пример отлично подходит для шрифтов, у которых есть отдельный файл TTF для полужирного и курсива. Но что, если весь шрифт находится в одном файле .ttf и вы хотите использовать жирный шрифт, как это работает?
2
Эта статья делает большую работу, объясняя, почему это работает. Отрывок ключа: «Обратите внимание, что свойство font-family - это одно и то же имя для всех четырех шрифтов. Кроме того, font-style и font-weight совпадают со шрифтом. Примечание. Нормальный вес должен быть в верхней части списка! Мы не нашли, что заказ после этого имеет значение. "
Джей Ди Смит
13
У меня возникли проблемы с этим отрубленным на встроенном браузере Android 4.4. Закончилась смена, font-style: italic, oblique;чтобы просто, font-style: italic;казалось, все исправить.
Хави
59

Начиная с CSS3, спецификация изменилась, допуская только одну font-style. Список через запятую (для CSS2) будет обрабатываться так, как если бы он был, normalи переопределял любую более раннюю (по умолчанию) запись. Это сделает шрифты, определенные таким образом, постоянно выделенными курсивом.

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

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

Иосия
источник
Я считаю, что третий и четвертый шрифты названы неправильно, они должны иметь «Курсив» вместо «Косой».
Натан Меррилл
3
@NathanMerrill как от OP: I have separate files for bold, italic and bold + italic- так что есть три разных файла. Этот ответ исправляет принятый в том, что font-style: italic, oblique;он больше не действителен, но также этот ответ использовал тот же файл для курсива и косой. Тем не менее, стоит отметить, что файл является общим в двух случаях.
Глупый урод
18

Для правильной работы варианта шрифта мне пришлось изменить порядок @ font-face в CSS.

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}
Седрик Саймон
источник
Очень полезный. +1
Мистер Полихирл
Что вы имеете в виду под «изменить порядок» ?
Nyxynyx
15

в настоящее время, 2017-12-17. Я не нахожу описание необходимости Font-property-order в спецификации . И я тестирую в chrome всегда работает в любом порядке.

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}
xlaoyu.Lee
источник
13

Если вы используете шрифты Google, я бы предложил следующее.

Если вы хотите, чтобы шрифты запускались с вашего локального хоста или сервера, вам нужно скачать файлы.

Вместо загрузки пакетов ttf в ссылках для загрузки используйте предоставленную ими прямую ссылку, например:

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

Вставьте URL в ваш браузер, и вы должны получить объявление шрифта, похожее на первый ответ.

Откройте предоставленные URL-адреса, загрузите и переименуйте файлы.

Прикрепите обновленные объявления шрифтов с относительными путями к файлам woff в вашем CSS, и все готово.

Дитер Грибниц
источник
3
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}
Джерри Т
источник
1

Не забывайте, что для жирного варианта это так font-weight; для курсивного варианта этоfont-style

Ooker
источник
Не очень связано с проблемой, и @font-faceпоэтому я пытаюсь понизить этот ответ (но не могу, мне не хватает репутации)
FaringggPannn
да, это не ответ на вопрос, но хорошо помнить при применении ответов. Проблема в том, что в разделе комментариев ответа уже много, поэтому этот совет будет похоронен
Ooker
Хорошо, тогда я этого не знал
FriedggPannn