相同的字体在运行相同操作系统版本和浏览器版本的两台 Mac 上呈现不同答案

【问题标题】：Same font renders differently across two Mac both running the same OS version and browser version相同的字体在运行相同操作系统版本和浏览器版本的两台 Mac 上呈现不同
【发布时间】：2026-02-07 09:15:02
【问题描述】：

我正在处理的网站有一个自定义脚本链接字体，确切地说是Santa fe。在我的 Mac 上，它在 Firefox 5 中呈现如下：

how it should render http://z17.me/oa2c+

这就是我希望它呈现的方式。

在我客户的 Mac 和其他人的 Mac 上，它呈现（不正确）如下：

improper rendering http://idzr.org/5ume

我之前在 Safari 中遇到过同样的问题，但 -webkit-font-smoothing: antialiased; 修复了它；但是，似乎 Firefox 没有类似的功能。

我还启用了text-rendering: optimizeLegibility;，并使用Font Squirrel 生成了网络字体包。

有什么想法吗？

编辑：字体应用了这个 CSS：

font-family: SantaFeLetPlainRegular;
font-weight: normal;
font-style: normal;
font-size: 21px;
text-transform: lowercase;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
/* @doubtful_existance: I don’t think these even exist? Can’t hurt much, I guess. */
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
/* end @doubtful_existance */
font-smoothing: antialiased;
text-shadow: 0 0 1px rgba(256, 256, 256, 0.01); /* A trick I’ve heard of to fix issues like this. */
opacity: 0.99; /* Another trick I’ve heard of to fix issues like this. */

【问题讨论】：

您查看过确切浏览器版本（例如5.0 vs 5.0.1）吗？因为这是我唯一能想到的。但一般而言，HTML 和 CSS 并不意味着实现精确的像素完美结果。不同的客户端将呈现您的页面略有不同，您必须相信他们会以足够接近您想要的方式进行操作。
你好 zyber，这个问题你解决了吗？

标签： html css rendering font-face

【解决方案1】：

尝试使用与背景颜色相似的 0px 文本阴影：

text-shadow: #fff 0 0 0;

另外，您是否尝试将font-weight:normal; 直接应用于使用脚本字体的任何元素？有时 Firefox 会在您不注意的情况下向您发送bold。

【讨论】：

更新了原帖，现在应该更清楚什么CSS适用于它。