Menu
Answer. Answer: Answer: yes you can only write font and specify all its values.
Meaning of relative weights Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900).
To request multiple font families, separate the names with a pipe character ( | ). Requesting multiple fonts allows you to use all of those fonts in your page. (But don't go overboard; most pages don't need very many fonts, and requesting a lot of fonts may make your pages slow to load.)
Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. Note: Separate each value with a comma. Note: If a font name contains white-space, it must be quoted.
Actually there is a special flavor of @font-face that will permit just what you're asking.
Here's an example using the same font-family name with different styles and weights associated with different fonts:
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
For a full overview of this feature and the standard use take a look at this article.
@font-face {
font-family: 'Klavika';
src: url(../fonts/Klavika-Regular.otf) format('truetype') font-weight-normal,
url(../fonts/Klavika-Bold.otf) format('truetype') font-weight-bold,
url(../fonts/Klavika-Bold-Italic.otf) format('truetype') font-italic font-weight-bold;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With