0

我有以下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和windows上都不会变亮。

4

3 回答 3

2

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

在几乎所有 Windows 系统中，值中列出的第一个可用字体系列font-family是 Arial。由于 Arial 没有重量为 100 或任何重量小于 400 的字体，因此字体匹配算法将使用普通 (400) 重量字体。

Windows 标准发行版中的字体通常缺少重量小于正常字体的字体。因此，要使用较轻的字体，您需要通过@font-face. 参见例如@font-face 现在可用吗？ （SO有很多关于使用的具体问题@font-face，如果您遇到具体问题，请检查它们）。

于 2013-09-29T08:01:41.783 回答
0

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

此外，如果您已经拥有权利并拥有您希望转换为网络字体的格式之一，您可以在此处完成：

http://www.fontsquirrel.com/

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

http://www.google.com/fonts

于 2013-09-29T03:55:11.907 回答
0

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

在字体粗细方面，您的 CSS 指定了非常轻的字体粗细：

font-weight: 100;

因此，如果您想改用粗体 Arial，则需要对其进行更改。

于 2013-09-29T07:39:03.687 回答