现代浏览器，Android和IOS需要什么样的字体文件？ [英] What kind of font files do I need for modern browsers, Android and IOS?

问题描述

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

I have these as my font files:

@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;
}

这些只是满足我的需要：

Would just these meet my needs:

@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才能满足我的需要？

Would just the woff and woff2 meet my needs?

推荐答案

您只需要WOFF 。这是为什么：

• eot 已弃用一段时间， em> obsolete 现在 Microsoft只支持最新的版本的IE支持版本的Windows，这意味着IE11和EDGE。这些支持WOFF就好了。请注意，Windows 7以前的所有操作系统都已经不支持（Windows Vista仍然受支持，但只有 SP2，只有 ）。


• svg 几年前被放弃。这是一个有趣的想法，但在实践中证明是坏的，因为它是真实的巨大的比真正的字体，并缺乏功能，对于体面的排版至关重要。几乎所有的浏览器，在过去的某个时候支持它，从那以后，再次删除了支持（这是多么糟糕）。只支持 svg 字体的两个浏览器也支持WOFF，因此没有理由同时提供。


• ttf 和 otf 是 OpenType字体（两者都有，由于历史原因它们有不同的扩展名，但除非你制作字体，基本上不相关），用于通用系统使用。像在计算机上安装或发送到现代打印机以生成物理文档。因此。他们有很多的位和bobs，他们需要支持（规范是相当大），其中许多实际上并不重要，如果你只是渲染网页到屏幕。 WOFF让你能够省略一些OpenType字体的简化，每个支持通用Opentype 的浏览器都支持WOFF。

• eot was deprecated for a while, but is actually obsolete now that Microsoft only supports "the latest version of IE for supported versions of Windows", so that means IE11 and EDGE. These support WOFF just fine. And note that everything older than Windows 7 is already out of support (Windows Vista is still supported but only SP2, and only for corporate enterprise licensed versions. You are not targeting those).
• svg was abandoned years ago. It was an interesting idea but turned out bad in practice because it was ludicrously huge compared to real fonts, and lacked features that are crucial for decent typography. Virtually all browsers that had support for it at some point in the past have since removed that support again (that's how bad it was). The only two browsers that still support svg fonts also support WOFF, so there is no reason to serve both.
• ttf and otf are OpenType fonts (both of them. They differ in extension for historical reasons, but unless you're making fonts, the differences between them are essentially irrelevant) that are intended for universal system use. Like installing on a computer or sending over to a modern printer for physical document generation. As such. they have a lot of bits and bobs that they need to support (the spec is rather large), many of which don't actually matter all that much if you're just rendering a web page to a screen. WOFF lets you get away with some simplifications in the OpenType font, and every browser that supports generic Opentype also supports WOFF. So again: just use WOFF.

要实现的事情是，WOFF是一个以字节为单位的OpenType字体的包装器，但是使用（可选）无损压缩，以使字体更小，从服务器传输到客户端的速度更快，并且表明字体仅在 用于网络，这意味着一些

The thing to realise is that WOFF is a byte-for-byte wrapper around OpenType fonts, but with (optional) lossless compression so that the font is smaller, making it faster to transmit from the server to the client, and indicates that the font is only for use on the web, which means that some of the requirements a font absolutely needs to meet to count as legal font on a universal type system are relaxed, so some more data can be shaved off.

我知道字体松鼠和字体在一个通用类型系统上被视为合法的字体，其他网站仍然生成有各种存在的格式！ CSS的字体包，但它是2016年，我们根本不需要这些巨大的集合了。虽然短短三年前这些集是最好的做法（使用在浏览器环境的CSS的'bullet proof'方法，当它来到webfonts高度分散），今天这些包是完全没有必要的。一切都支持WOFF。

I know Font Squirrel and other sites still generate the "have every format that ever existed!" kind of CSS font packs, but it's 2016 and we simply don't need these huge sets anymore. While even as short as three years ago these sets were best practice (using the 'bullet proof' approach to CSS in a browser landscape that was highly fragmented when it came to webfonts), today these packs are entirely unnecessary. Everything supports WOFF.

WOFF2怎么办？

"What about WOFF2?"

WOFF2 是修订 brotli ，而不是WOFF的放气）如果您定位的浏览器支持它：伟大。但是请先检查 http://caniuse.com ;有很多浏览器不支持它，特别是在流行的平台（Windows的IE和苹果的Safari不支持WOFF2现在，IE最终，但Safari ...谁知道）

WOFF2 is a revision of the WOFF specification, with a newer, better lossless encryption algorithm for the kind of binary data you find served on the web (WOFF2 uses brotli, rather than WOFF's "deflate") so if the browsers you're targeting support it: great. But check http://caniuse.com for that first; there are a lot of browsers that don't support it just yet, particularly on popular platforms (Windows's IE and Apple's Safari do not support WOFF2 right now. IE will eventually, but Safari... who knows)

当我要求WOFF2时，Google字体会做什么呢？

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

事实上，WOFF2还允许通过指定字符子集加载应该如何加载一种字体，这样你只能加载尽可能多的字体，以支持用户的区域设置。但是，除非您运行的网站需要在几个不同的本地化版本中可用，以本地语言定位到这个星球上的特定市场，或者您正在运行一个网站，该网站教授不同的语言，所有这些语言都需要使用相同的样式字体系列（这是不太可能的），这对你是非常不相关的。

Indeed, WOFF2 also allows loading "one font" in chunks, by specifying how character subset loading should work, so that you can only load as much of a font as you need to support your users' locales. However, unless you run a website that needs to be available in several different localised versions, targeting specific markets on this planet in their native language, or you're running a site that teaches different languages all of which need to be styled with the same font family (which is highly unlikely) this is pretty much irrelevant to you.

这篇关于现代浏览器，Android和IOS需要什么样的字体文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！