使用@ font-face时浏览器会下载哪些字体 [英] What fonts do browsers download when using @font-face

问题描述

@ font-face有点令人困惑，因为所有浏览器都无法决定要使用的单一文件格式.以下是我目前在网站上使用的一种添加新字体的方法，您可以看到有4个单独的字体文件，我知道每个字体文件都是因为某些浏览器支持不同的格式，但是浏览器会下载所有文件还是仅下载1个字体?需要吗?

@font-face is kind of confusing as all the browsers cannot decide on a single file format to use. Below is what I am currently using to add 1 new font to a site, you can see there is 4 separate font files, I know that each one is because some browsers support different formats but does the browser download all the files or just the 1 that it needs?

@font-face {
    font-family: 'Oswald';
    src: url('oswald-webfont.eot');
    src: url('oswald-webfont.eot?#iefix') format('embedded-opentype'),
         url('oswald-webfont.woff') format('woff'),
         url('oswald-webfont.ttf') format('truetype'),
         url('oswald-webfont.svg#OswaldRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

推荐答案

我希望浏览器下载它支持的所有字体，而不是仅应用最新字体，就像其他CSS属性一样

I would expect for a browser to download all fonts that it supports and than apply the latest only, just like with other css properties.

我的期望似乎是错误的.在一个嵌入了带有与您上面提供的标记相同的标记的字体的站点上，FF也仅下载了.woff文件，即使它也支持.ttf/.otf.

My expectation seems to be wrong though. On a site that embedded fonts with markup identical to what you've provided above, FF only downloaded the .woff file even though it supports .ttf/.otf as well.

FYI，支持矩阵；各个格式都链接到底部.

FYI, the support matrix; individual formats are linked to at the bottom.

这篇关于使用@ font-face时浏览器会下载哪些字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！