与 FF 和 Chrome 相比，IE 的渲染字体不同
Posted
技术标签:
【中文标题】与 FF 和 Chrome 相比，IE 的渲染字体不同【英文标题】：Rendering font differs from IE compared to FF and Chrome 【发布时间】：2012-03-23 09:48:32 【问题描述】：我注意到，例如，如果大小不同，字体的呈现会有很大差异。 11像素。运行 Windows 7
使用以下 html 和 CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing font</title>
<style>
body
font-family: "Helvetica","Arial",sans-serif;
color: #1A1A1A;
padding: 10px;
.foo
font-size: 14px;
.bar
font-size: 11px;
</style>
</head>
<body>
<div class="foo">
<p>HOME</p>
</div>
<div class="bar">
<p>HOME</p>
</div>
</body>
</html>
如附图所示，FF 和 Chrome 倾向于将宽度收紧为 11px 而不是 14px。
为什么会这样，有解决方法吗？
【问题讨论】：
不同的浏览器使用不同的字体渲染引擎。说得够多了。 听起来可能是个愚蠢的想法，但请检查一下您是否不小心放大了字体，有时会发生 :) 尝试 ctrl+0 可能会有所帮助 @BoltClock 可能是这样，但无论浏览器如何，Arial 都是 Arial。如果 14px 呈现相同的效果，我相信关于 11px 的问题是允许的。甚至可以认为字体是基于矢量图形的，矢量图形是数学公式。数学是一种通用语言。 【参考方案1】：不是专家，但这对我有用...
html, body
zoom:1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
所有浏览器字体现在似乎都呈现相同的跨浏览器。
【讨论】：
【参考方案2】：Firefox 7+ 在 Windows 7 uses GDI Classic mode（带提示）下渲染所谓的 Core Web 字体，如 Arial（因为启用提示后它们更清晰易读），而 DirectWrite（不带提示）用于其他字体。下面列出了使用 GDI 模式的特定字体 about:config pref:
gfx.font_rendering.cleartype_params.force_gdi_classic_for_families
AFAIK，Firefox 中的渲染模式也取决于字体大小。对于足够大的字体和太小的字体（可能大于 15 像素，也可能小于 9 像素），它也使用 DirectWrite for Core Web 字体。
Windows 7 下的 IE9 始终使用 DirectWrite。
Chrome 似乎总是使用 GDI 经典模式。
【讨论】：
换句话说，除了图像之外没有其他解决方法。小型核心网络字体看起来不一样。 您有 IE 和 Chrome 的参考资料吗？ [编辑：找到这个链接：blog.mozilla.org/nattokirai/2011/08/11/… 虽然有点旧] 找到了支持directwrite的Chrome错误：crbug.com/25541这里是当前所有用于directwrite的chrome错误：code.google.com/p/chromium/issues/… @SamHasler：对于IE9，官方IE博客multipletimes已经提到Direct2D/DirectWrite。【参考方案3】：某些字体渲染引擎可能会支持其他人不支持的 CSS 属性（如 letter-spacing、text-rendering、font-stretch、font-size-adjust 等 - 请参阅 CSS3 Font Module）。您可以尝试使用您找到的那些，最终在不同的浏览器中实现（几乎）统一的渲染。
【讨论】：
【参考方案4】：不同的浏览器使用不同的引擎。
甚至 FF 在 Linux 上使用的算法也与在 Windows 上不同。
甚至用户设置（缩放、配色方案；可能出于可访问性的原因）也可以（并且将）无情地破坏你的美丽风格。
作为“解决方法”，我看到两个选项：
如果你真的非常需要，在家里渲染字体并在网站上放一个 PNG 更改您的样式，使其不依赖于任何字体大小、类型或其他比例。这样它在每个浏览器中都会看起来不错（至少可读）【讨论】：
以上是关于与 FF 和 Chrome 相比，IE 的渲染字体不同的主要内容，如果未能解决你的问题，请参考以下文章
chrome vs FF/IE/Opera 计算表格单元格宽度？ （表格布局：固定）