Possible format values for font-face src
P粉447785031
2023-08-29 15:53:34
<p>How do you know what to use, when to use it, and whether you really need them? </p>
<p>Many sites have examples like this, but in a different order: </p>
<pre class="brush:php;toolbar:false;">@font-face {
font-family: 'Example';
src: url('Example.eot');
src: url('Example.eot?#iefix') format('embedded-opentype'),
url('Example.woff2') format('woff2'),
url('Example.woff') format('woff'),
url('Example.ttf') format('truetype'),
url('Example.svg#svgExample') format('svg');
}</pre>
<p>But I have also seen examples like this: </p>
<pre class="brush:php;toolbar:false;">@font-face {
font-family: 'Example';
src: url('Example.woff2') format('woff');
}
@font-face {
font-family: 'Example';
src: url('Example.ttf') format('woff2-variations');
}
@font-face {
font-family: 'Example';
src: url('Example.otf');
}</pre>
<p>Sometimes the format looks identical to the end of file, sometimes the end of file is abbreviated or at least partially the same, and other times they appear to be completely random strings, or sometimes nothing at all if it's just a file. </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
It's not important to understand all possible format values - since many of them originate from experimental browser implementations.
In fact, you might compare some formatting values to CSS browser prefixes - fortunately, they have become less relevant - unfortunately, they are still sometimes relevant.
Refer to your first
@font-faceexample:@font-face { font-family: 'Example'; src: url('Example.eot'); src: url('Example.eot?#iefix') format('embedded-opentype'), url('Example.woff2') format('woff2'), url('Example.woff') format('woff'), url('Example.ttf') format('truetype'), url('Example.svg#svgExample') format('svg'); }.otf format('opentype')
.otfis actually missing - but it has nothing to do with network usage.src: url("Example.otf") format("opentype");Similar to truetype, they can be installed locally and used in any desktop application.
In font casting lingo: OTF font files are also known as "post-script flavor" Open Type fonts.
TheAnd .ttf/truetype fonts are also called "Truetype flavored" Open Type fonts.
.otffont lacks advanced file compression compared to woff2..eot format('embedded-opentype')
Only used by Internet Explorer - but even these atrocities are at least capable of rendering ttf/truetype.
.eotObsolete(Unless you need to maintain some embedded systems running on special windows embedded systems).
.svg format('svg')
Only supported by webkit browsers (safari, epiphany, midori) and Android browsers.
However, all of the above browsers also support woff2, woff or truetype.
Most importantly, it is not supported by Chromium/Blink based browsers (opera, Vivaldi, Brave, Internet Explorer 13/Edge) or Firefox.
No
.svgfont files are required (although they can be conveniently used as an interchange format for icon generators such as icomoon).ttf format('truetype')
is probably the best supported font format, but not as compact as woff2 or woff.
Additionally, truetype fonts are available in desktop environments and therefore can be installed and used locally in any application.
Still relevant for some use cases (e.g. pdf conversion).
Variable font
You may encounter old symbols like the ones in this article: css tips
src: url("Example.woff2") format("woff2 supports variations"), url("Example.woff2") format("woff2-variations");These additional format types originate from a time when variable font support was still experimental.
Today, they are no longer needed - just use normal format identifiers.
You "might" abandon this format too
Most modern browsers can map font files to font families even without a specified format.
Still, it's a good idea to include them.
But: Wrong format value can break your @font-face rules!
Common mistakes:
url('Example.ttf') format('ttf') //not correctinstead of
url('Example.ttf') format('truetype') //correct...don't forget the weight and style properties
@font-face { font-family: 'Example'; src: url('Example.woff2') format('woff2'), url('Example.woff') format('woff'), url('Example.ttf') format('truetype'); font-weight:400; font-style: normal; font-stretch: 100%; } /* next font style: e.g bold italic condensed */ @font-face { font-family: 'Example'; src: url('Example_boldItalicCn.woff2') format('woff2'), url('Example_boldItalicCn.woff') format('woff'), url('Example_boldItalicCn.ttf') format('truetype'); font-weight:700; font-style: italic; font-stretch: 50%; }Variable font@font-face
In this example, font-weight and other properties contain 2 values to define the range, for example
font-weight: 100 1000.@font-face { font-family: 'Example; font-style: normal; font-weight: 100 1000; font-stretch: 0% 200%; src: url(Example.woff2) format('woff2'); }