现代浏览器,Android和IOS需要哪些字体文件？

2023-11-26 23:05:10

我有这些作为我的字体文件：

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff2') format('woff2'),
    url('@{fa-font-path}/fontawesome-webfont.woff') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf') format('truetype'),
    url('@{fa-font-path}/fontawesome-webfont.svg fontawesomeregular') format('svg');
//  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

这些只是满足我的需求：

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot');
  src: url('@{fa-font-path}/fontawesome-webfont.woff2') format('woff2'),
    url('@{fa-font-path}/fontawesome-webfont.woff') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

woff和woff2会满足我的需求吗？

解决方法:

正如in this SO post所述,你just need WOFF.这就是为什么：

> eot已被弃用了一段时间,但现在已经过时了Microsoft only supports Edge, plus “the latest version of IE for supported versions of Windows”,此时只有IE11(2018年11月).这两个都支持WOFF就好了.另请注意,早于Windows 7的所有内容都已不再受支持(在此答案时,Windows Vista SP2仍受公司企业许可证支持,但此后也已达到使用寿命).
> svg was abandoned years ago.这是一个有趣的想法,但在实践中表现不佳,因为它与真实字体相比非常大,并且缺乏对于体面排版至关重要的功能.整个< font>第was removed from SVG2章,几乎所有在过去的某个时刻都支持它的浏览器都再次删除了这种支持(这有多糟糕).仅支持svg字体的两个浏览器也支持WOFF,因此没有理由同时支持这两种浏览器.
> ttf和otf是OpenType fonts(两者都有.由于历史原因,它们的扩展名不同,但除非你制作字体,否则它们之间的差异基本上是不相关的),这些字体用于通用系统.就像在计算机上安装或发送到现代打印机以生成物理文档一样.因此.他们有很多需要支持的位和bob(规范is rather large),如果你只是将网页渲染到屏幕上,其中许多实际上并不重要. WOFF允许您在OpenType字体中进行一些简化,并且支持通用Opentype的每个浏览器也支持WOFF.再说一次：只使用WOFF.

要实现的是WOFF是围绕OpenType字体的逐字节包装,但是(可选)无损压缩使得字体更小,使得从服务器传输到客户端更快,并指示字体仅用于网络,这意味着字体绝对需要满足的一些要求在通用类型系统上被视为合法字体,因此可以减少一些更多的数据.

我知道Font Squirrel和其他网站仍然会产生“有各种格式！”一种CSS字体包,但它是2017年,我们根本不再需要这些庞大的设置.虽然即使短至三年前这些集合也是最佳实践(在浏览器环境中使用“防弹”方法,当涉及到webfonts时,这种方法非常分散),但今天这些包完全没必要.一切都支持WOFF.

“What about WOFF2?”

WOFF2是WOFF规范的修订版,为您在网上提供的二进制数据类型提供了更新,更好的无损加密算法(WOFF2使用brotli,而不是WOFF的“deflate”),因此如果您要定位的浏览器支持它：很棒.但请先查看http://caniuse.com;有很多浏览器还没有支持它,特别是在流行的平台上(Windows的IE和Apple的Safari现在不支持WOFF2.最终IE会,但Safari ……谁知道)

“What about that subsetting thing Google fonts does when I ask for WOFF2?”

实际上,WOFF2还允许通过指定字符子集加载应该如何工作来加载块中的“一种字体”,这样您就只能加载所需的字体以支持用户的语言环境.但是,除非您运行一个需要在几个不同的本地化版本中提供的网站,以他们的母语定位这个星球上的特定市场,或者您正在运行一个教授不同语言的网站,所有这些都需要使用相同的方式设置字体系列(这是极不可能的)这与你几乎无关.

码农公寓

相关文章