@font-face 在 Firefox 中丢失字母
我的 Museo-300 主要与 @font-face 一起使用,但某些字母组合(如“ff”和“fi”)在 Firefox 中消失(在 v3.6 和 v7.0.1 中得到确认)。于是“小额信贷”就变成了“小额信贷”。
请注意,我将它们输出为单个字母,而不是连字。例如,当我在服务器和浏览器上查看源代码时,“coffee”会单独拼写为所有六个字母,而不是“ff”的 unicode 连字字符。
输出在 Opera、Chrome、Safari 和 IE(甚至 IE6)中看起来都是正确的。
我从 MyFonts 下载了 Museo-300 及其网络字体示例模板。
@font-face {
font-family: 'Museo-300';
src: url('webfonts/151B6C_0.eot');
src: url('webfonts/151B6C_0.eot?#iefix') format('embedded-opentype'),url('webfonts/151B6C_0.woff') format('woff'),url('webfonts/151B6C_0.ttf') format('truetype'),url('webfonts/151B6C_0.svg#wf') format('svg');
}
并且所有引用的文件都已就位。我这样调用它:
font-family: 'Museo-300', sans-serif;
我尝试了一种不同的字体作为测试(Code Pro Light Demo,也从 MyFonts 获得),Firefox 删除了“fi”,但没有删除“ff”。
知道出了什么问题吗?
I have Museo-300 mostly working with @font-face, but certain letter combinations like "ff" and "fi" are disappearing in Firefox (confirmed in v3.6 and v7.0.1). So "microfinance" becomes "micronance".
Note that I'm outputting these as individual letters, not as ligatures. When I view source on both the server and the browser, "coffee" for example is spelled with all six letters individually—not a unicode ligature character for "ff".
The output looks right in Opera, Chrome, Safari, and IE (even IE6).
I downloaded Museo-300 from MyFonts along with their web font example template.
@font-face {
font-family: 'Museo-300';
src: url('webfonts/151B6C_0.eot');
src: url('webfonts/151B6C_0.eot?#iefix') format('embedded-opentype'),url('webfonts/151B6C_0.woff') format('woff'),url('webfonts/151B6C_0.ttf') format('truetype'),url('webfonts/151B6C_0.svg#wf') format('svg');
}
and all the referenced files are in place. I invoke it like this:
font-family: 'Museo-300', sans-serif;
I tried a different font as a test (Code Pro Light Demo, also gotten from MyFonts) and Firefox dropps "fi" but not "ff" for that one.
An idea what's going wrong?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
对于将来阅读本文的任何人,请注意,从 FF 15(我认为)开始,语法现已更改,您需要使用以下内容:
For anyone reading this in the future, note that as of FF 15 (I think) the syntax has now changed, and you'll need to use this:
您可以通过添加以下内容来告诉 Firefox 跳过查找连字并将其视为常规字符
字体声明中的
-moz-font-feature-settings: "liga=0"
。You can tell Firefox to skip looking for ligatures and treat them as regular characters by adding
-moz-font-feature-settings: "liga=0"
in your font-face declaration.如果其他人遇到这个问题,我在 MyFonts 技术支持的帮助下解决了它。我不确定这个问题是否特定于 MyFonts,但我怀疑它会影响其他网络字体源。
直接(可解决)原因
当标准 True Type 字体 (TTF) 被处理为对 Web 字体有用的多个版本(EOT、SVG、WOFF)时,处理工具或供应商可以决定是否或不包含字体的完整字符集。有些会默认使用缩减字符集以减小文件大小。
就我而言,生成的一个或多个网络字体文件排除了连字,大概认为它们是非必要的排版调整。为了解决这个问题,我在 MyFonts 中使用了自定义 Web 字体生成器来生成具有完整字符集的字体文件。
(对于 MyFonts,特别是在“订单历史记录 > 选择相关字体 > Webfont Kit Builder 选项卡 > 高级”中,然后选中“完整字符集”和“保留 OpenType 布局”。)
根本原因
我相信,这只是一个有根据的猜测:
我认为 Firefox 正在不遗余力地制作漂亮的排版,比其他浏览器做得更多。因此,当它看到可以呈现为 连字 ("fi", "fl", “ff”等)它尝试将字母呈现为单个连字字形而不是两个不同的字符。如果您的网络字体不包含连字字形,您的字母将会消失。 (如果我的猜测是正确的,我很惊讶我之前没有读过这个问题。)
In case others hit this problem, I resolved it with help from MyFonts technical support. I'm not sure whether this issues is specific to MyFonts, but I suspect it affects other web font sources.
Direct (Solvable) Cause
When a standard True Type font (TTF) gets processed into the multiple versions that are useful for a web font (EOT, SVG, WOFF), the processing tool or vendor can decide whether or not to include the font's full character set. Some will default to a reduced character set to reduce file sizes.
In my case, one or more of the generated web font files excluded ligatures, presumably considering them to be non-essential typographic tweaks. To fix the problem I used a custom web font builder at MyFonts to generate font files with the full character set.
(For MyFonts specifically this was at Order History > select relevant font > Webfont Kit Builder tab > Advanced, then check both "Complete Character Set" and "Keep OpenType Layout".)
Underlying Cause
My belief, which is only an educated guess:
I think Firefox is going out of its way to do nice typography, more so than other browsers. So when it sees something that it could render as a ligature ("fi", "fl", "ff", etc.) it tries to render the letters as a single ligature glyph rather than as two distinct characters. If your web font doesn't include the ligature glyphs, your letters will disappear. (If my guess is right, I'm surprised I haven't read about this problem before.)
Myfonts.com 最近更改了一些显示设置。他们的支持很快就回复了以下信息:
虽然目前无法通过 Firefox 获得此视图,但我可以使用 IE9 下载完整的字符集。
Myfonts.com recently changed some display settings. Their support wrote back very quickly with the following info:
This view is not currently available through Firefox though, but I was able to download the complete character sets using IE9.