Я смотрю страницу 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;
}
В большинстве случаев курсив, вероятно, будет достаточным, и наклонные правила не будут необходимы, если вы позаботитесь о том, что вы будете использовать и придерживаться его.
I have separate files for bold, italic and bold + italic
- так что есть три разных файла. Этот ответ исправляет принятый в этом font-style: italic, oblique;
больше не действителен, но также этот ответ использовал один и тот же файл для курсива и косой. Тем не менее, стоит отметить, что файл является общим в двух случаях.
Если вы используете шрифты Google, я бы предложил следующее.
Если вы хотите, чтобы шрифты запускались с вашего локального хоста или сервера, вам необходимо загрузить файлы.
Вместо того, чтобы загружать пакеты ttf в ссылки для загрузки, используйте прямую ссылку, которую они предоставляют, например:
http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic
Вставьте URL-адрес в свой браузер, и вы должны получить объявление шрифта, похожее на первый ответ.
Откройте предоставленные URL, загрузите и переименуйте файлы.
Придерживайте обновленные объявления шрифтов с относительными путями к файлам woff в вашем CSS, и все готово.
Чтобы иметь правильное изменение шрифта, мне пришлось отменить порядок @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. Я не нашел описания о необходимости порядка шрифтов в spec. И я тестирую в хроме, всегда работает независимо от порядка.
@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');
}
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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;
}