在Mozilla Firefox中错误地渲染Google字体 [英] Wrong rendering of Google Fonts in Mozilla Firefox
问题描述
现在我有同样的问题，经过2小时的搜索，我找不到解决方案。
这个问题出现在所有使用谷歌字体的网站上。
在Internet Explorer中，一切看起来都不错，所以看起来问题出在计算机上，而不是在网站上。
这里是我在firefox中看到的截图：
这里是从Internet Explorer截图：
正如你所看到的，大部分字母在顶部有一个点，没有抗锯齿（这是没有变焦时测试 - CTRL 0）
如果我放大
我到目前为止试过的是：
< 1）我的电脑>属性>高级>性能>视觉效果>屏幕字体的平滑边缘>选择 外观>字体>调整ClearType文本>打开ClearType
$ b <3> Firefox>工具>选项>高级>常规>浏览：使用硬件加速时>禁用
<4> Firefox> about：config> gfx.content.azure.enabled> false 5）Firefox> about：config> gfx.direct2d.disabled> true
6）Firefox> about：config> layers.acceleration.disabled> true
你从未提及过什么特定类型的webFont使用。我通过测试发现，当clearType打开时，FireFox呈现woff和woff2字体效果不佳。您可以简单地确保您在CSS @ font-face规则中引用了trueType字体，并且可以解决几乎所有主流浏览器的问题。然而，trueType字体相当大，所以这是以加载时间/大小为代价的。
一个更优雅的解决方案将需要将trueType字体提供给FireFox，但woff或woff2大多数其他浏览器。
精心制作：
浏览器webFont兼容性的大多数解决方案需要为不同的字体类型堆叠URL，如下所示：
@ font-face {
font-family：'myFontFamilyName'; （''/ fonts / font.woff2'）格式（'woff2'），
url（'../ fonts / font.woff'）格式（'woff'），
url（'../ fonts / font.ttf'）格式（'truetype'）;
浏览器通过该列表完整地解析并加载他们理解的第一种格式。 p>
这里的问题是，尽管Firefox可以使用woff2或者woff，但是在clearType打开的时候，它们会非常糟糕，几乎总是这样。所以最好的是FireFox得到一个更像这样的CSS块：
$ $ p $ $ $ c $ @ font-face {
font-家庭：'myFontFamilyName';
src：url（'../ fonts / font.ttf'）格式（'trueType'）;
$ b
所以挑战就成为了如何去做。
< link href = myBaseURL.css fontCode = LT; desiredCode>&安培; fontType = LT; desiredType>中rel =stylesheettype =text / css/>
在CSS规则中：
@fontType：svg; / *默认* /
@fontCode：svg; / *默认* /
@ font-face {
font-family：'myFontFamilyName';
src：url（'../ fonts / font。@ {fontCode}'）格式（'@ {fontType}'），
url（'../ fonts / font.woff2'）格式（'woff2'），
url（'../ fonts / font.woff'）格式（'woff'），
url（'../ fonts / font.ttf'）格式（'的TrueType'）;
$ / code>
然后在浏览器中传入所需的fontCode和fontType - 基本上检测FireFox并传递'ttf'和'trueType'：
< link href =myBaseURL.css？fontCode = ttf& fontType = trueTyperel =stylesheettype =text / css/>
使用.less会产生这个输出：
@fontType：svg; / *默认* /
@fontCode：svg; / *默认* /
@ font-face {
font-family：'myFontFamilyName'; （''/ fonts / font.ttf'）格式（'trueType'），
url（'../ fonts / font.woff2'）格式（'woff2'），
url（'../ fonts / font.woff'）格式（'woff'），
url（'../ fonts / font.ttf'）格式（'truetype'）;
$ b 有点重复，但是因为FireFox会加载它可以渲染的第一个引用， .ttf字体将被加载。
I found once someone who had same problem and I was able to fix this.
Now I have same problem and after 2h of searching I can't find solution.
This problem appears on all websites using google fonts.
In Internet Explorer everything look ok so looks like the problem is on the computer and not on website itself.
Here is screenshot what I see in my firefox:
Here is screenshot from Internet Explorer:
As you can see most of the letters have a "dot" on top and there is no "anti-aliasing" (This is tested when there is no zoom - CTRL 0)
If I zoom in (CRTL +) than "dots disappear" and text start to look normal.
What I have tried so far:
1) My Computer > Properties > Advanced > Performance > Visual Effects > "smooth edges of screen fonts" > selected
2) Control Panel > Personalization > Window Color and Appearance > Fonts > Adjust ClearType text > Turn On ClearType
3) Firefox > Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available" > disabled
4) Firefox > about:config > gfx.content.azure.enabled > false (I don't have this)
5) Firefox > about:config > gfx.direct2d.disabled > true
6) Firefox > about:config > layers.acceleration.disabled > true
解决方案 You never mentioned what particular type of webFont you are using. What I have found through testing is that FireFox renders woff and woff2 fonts poorly when clearType is on. You could simply ensure that you reference trueType fonts in your CSS @font-face rules, and that will solve the problem for pretty much all major browsers. However, trueType fonts are rather large so this comes at the expense of load times / size.
A more elegant solution would entail feeding trueType fonts to FireFox but woff or woff2 to most other browsers.
To elaborate:
Most solutions to browser webFont compatibility entail stacking the URL's for differeing font types with the most desired coming first, like this:
@font-face {
font-family: 'myFontFamilyName';
src:url('../fonts/font.woff2') format('woff2'),
url('../fonts/font.woff') format('woff'),
url('../fonts/font.ttf') format('truetype');
}
Browsers dutifully parse through that list and load the first format they understand.
The problem here is that although Firefox can make use of woff2 or woff, it renders them very badly when clearType is on, which it almost always is. So what is desirable is that FireFox get a css block more like this:
@font-face {
font-family: 'myFontFamilyName';
src:url('../fonts/font.ttf') format('trueType');
}
So the challenge becomes how to do it. I accomplished this using .less to pass in a code and type as variables, something like this:
<link href="myBaseURL.css?fontCode=<desiredCode>&fontType=<desiredType>" rel="stylesheet" type="text/css" />
And in the CSS rules:
@fontType: svg; /*default*/
@fontCode: svg; /*default*/
@font-face {
font-family: 'myFontFamilyName';
src:url('../fonts/font.@{fontCode}') format('@{fontType}'),
url('../fonts/font.woff2') format('woff2'),
url('../fonts/font.woff') format('woff'),
url('../fonts/font.ttf') format('truetype');
}
Then you pass in the desired fontCode and fontType based on the browser - basically detect FireFox and pass 'ttf' and 'trueType':
<link href="myBaseURL.css?fontCode=ttf&fontType=trueType" rel="stylesheet" type="text/css" />
Which using .less would yield this output:
@fontType: svg; /*default*/
@fontCode: svg; /*default*/
@font-face {
font-family: 'myFontFamilyName';
src:url('../fonts/font.ttf') format('trueType'),
url('../fonts/font.woff2') format('woff2'),
url('../fonts/font.woff') format('woff'),
url('../fonts/font.ttf') format('truetype');
}
Somewhat repetitive, but because FireFox will load the first reference it can render, the .ttf font will get loaded.
这篇关于在Mozilla Firefox中错误地渲染Google字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
