mac 和 windows css 呈现字体、字母间距之间的细微差别

Question

Hiall，我有一些基本的 css 使用具有 eg

的 class

 .myclass {
     font-family: Arial, sans-serif;
     letter-spacing: 0px;
 }

在 mac 上看起来很棒，但在 windows 上字体失去了一些重量，也可能因此它的字母间距看起来略有增加。

只是想知道我如何才能针对 IE，最后是 Firefox，这样我才能对这些东西进行细微的更改。我知道我可能无法找到它们，但我想至少尝试看看增加字体粗细和减少字母间距对 IE 和 FF 等有什么影响。

我之前真的没有太多关于供应商前缀等的事情

任何帮助都会很棒

Answer 1

发生这种情况是因为字体不完全相同...差异来自操作系统附带的字体。如果您 want/can，您可以做的一件事是使用另一种您要嵌入的字体，该字体在 platforms/browsers.

中完全相同

这是一个漂亮的小 gif，显示了 mac 和 windows 之间的 arial 和 verdana 差异：http://fmforums.com/forum/topic/79795-cross-platform-fonts-revisited-arial-vs-verdana/

这是一个关于网络字体的很好的教程： http://www.sitepoint.com/how-to-use-cross-browser-web-fonts-part-1/

The reality of getting web fonts to work across browsers is a little different. Different browsers support a slightly different set of font formats, so you need to provide a set of alternatives.

Web Open Font Format (.woff): For all modern browsers Embedded Open Type: For older versions of Internet Explorer (IE< =8) SVG fonts: For older versions of iOS Safari (3.2-4.1) Truetype fonts: For older versions of the default android browser

mac 和 windows css 呈现字体、字母间距之间的细微差别

Slight differences between mac and windows css rendering font, letter-spacing

css

fonts