Як додати кілька файлів шрифту для одного і того ж шрифту?

Я переглядаю сторінку 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правил, наприклад:

@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 дозволяє використовувати лише один стиль шрифту, а не розділений комою список.)

Станом на 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;
}

У більшості випадків курсив, ймовірно, буде достатнім, а косі правила не знадобляться, якщо ви подбаєте про визначення того, що ви будете використовувати, та дотримуйтесь його.

Щоб коректно змінилася версія шрифту, мені довелося змінити порядок @ 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");
}

нині, 2017-12-17. Я не знаходжу жодного опису про необхідність замовлення Font-властивості у специфікації . І тест на хром завжди працює незалежно від порядку.

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

Якщо ви використовуєте шрифти Google, я б запропонував таке.

Якщо ви хочете, щоб шрифти запускалися з вашого localhost або сервера, вам потрібно завантажити файли.

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

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

Вставте URL-адресу у свій веб-переглядач, і ви повинні отримати декларацію про шрифт, подібну до першого відповіді.

Відкрийте надані URL-адреси, завантажте та перейменуйте файли.

Наклейте оновлені декларації шрифту на обличчі відносними шляхами до файлів woff у вашому CSS, і ви закінчите.

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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;
}

Не забувайте, що для сміливого варіанту це так font-weight; для курсивного варіанту він єfont-style