Question

我有以下CSS：

font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: 100; letter-spacing: 1px; }

适用于所有Mac浏览器（Chrome，Safari）但是我在Windows上的Chrome和Internet Explorer上打开了我的项目，它将字体显示为粗体而不是光。我不知道如何解决这个问题，但我需要设计与mac上显示的设计跨平台工作。

提前致谢。

编辑：我尝试过使用arial，但arial在mac 和窗口都不会变亮。

Answer 1

您在Windows上看到的字体不是粗体，它只是常规的Arial。

在几乎所有Windows系统中，font-family值中列出的第一个可用字体系列是Arial。由于Arial没有重量为100的字体，或者任何重量小于400的字体，因此使用普通（400）重量字体代替font matching algorithm。

Windows标准发行版中的字体通常缺少重量低于正常值的字体。因此，要使用较轻的字体，您需要通过@font-face使用可下载的字体（网络字体）。参见例如Is @font-face usable now? （SO有很多关于使用@font-face的具体问题，如果遇到特定问题，请检查它们。）

Answer 2

font-family属性告知浏览器它需要使用该字体。如果没有路径，它将检查系统是否具有该路径。

为了能够使用适用于所有系统的字体，您需要使用@ font-face属性。

最后一个将允许您指定所有格式字体的路径，大多数浏览器将下载以正确显示它。（为了您的信息，所有最近的浏览器都支持它）

@font-face {
    font-family: 'myFont';
    src: url('myFont.eot');
    src: url('myFont.eot?#iefix') format('embedded-opentype'),
         url('myFont.woff') format('woff'),
         url('myFont.ttf') format('truetype'),
         url('myFont.svg#myFont') format('svg');
    font-weight: normal;
    font-style: normal;
}

如果您想了解有关该属性的更多信息，可以在此处查看参考资料：

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

在您的情况下，字体HelveticaNeue受版权保护，您需要购买能够将其用作网页的权利。

您可以在这里查看定价： http://www.fonts.com/search/all-fonts?searchtext=HelveticaNeue#product_top

此外，如果您已经拥有并且拥有要转换为webfont的格式之一，则可以在此处完成此操作：

http://www.fontsquirrel.com/

最后，如果您愿意，可以使用将为您托管文件的Google字体，您只需要在页面中插入一个小脚本：

http://www.google.com/fonts

Answer 3

您可以按照他人的建议使用网络字体（免费或付费），或者只使用可能涵盖所有基础的漂亮字体堆栈。 CSS Tricks有很好的一组：http://css-tricks.com/snippets/css/font-stacks/

就字体粗细而言，CSS指定了非常轻的字体粗细：

font-weight: 100;

因此，如果您想使用粗体Arial，则需要更改它。

CSS代码在Mac浏览器上运行但在Windows浏览器上运行？

3 个答案: