在网站中使用Helvetica Neue

时间:2012-08-22 09:25:26

标签: html css fonts

通常情况下,我会在某些网站上使用"Helvetica Neue"来查看其他网站的字体,我看过一些网站"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue"

有没有理由以这种方式引用Helvetica Neue?或者我应该坚持我使用的正常情况吗?

3 个答案:

答案 0 :(得分:35)

我推荐Chris Coyier关于CSS Tricks的文章,名为Better Helvetica:

http://css-tricks.com/snippets/css/better-helvetica/

他基本上建议以下声明涵盖所有基础:

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
}

答案 1 :(得分:18)

他们采用“霰弹枪”方法来引用字体。浏览器将尝试将每个字体名称与用户计算机上的任何已安装字体进行匹配(按照列出的顺序)。

在您的示例中,首先会尝试"HelveticaNeue-Light",如果此字体变体不可用,浏览器将尝试"Helvetica Neue Light",最后"Helvetica Neue"

据我所知,"Helvetica Neue"不被视为“网络安全字体”,这意味着您将无法依赖它为整个用户群安装。将"serif""sans-serif"定义为最终默认位置非常常见。

为了使用不是“网络安全”的字体,您需要使用一种称为字体嵌入的技术。嵌入式字体不需要安装在用户的计算机上,而是作为页面的一部分下载。请注意,这会增加整体有效负载(就像图像一样)并且会对页面加载时间产生影响。

使用开源许可证的免费字体的一个很好的资源是Google Fonts。 (在使用之前,您仍应检查各个许可证。)每种字体都有一个下载链接,其中包含有关如何将它们嵌入您网站的说明。

答案 2 :(得分:0)

假设您已经引用并正确地将您的字体集成到您的网站(可能使用@ font-face工具包),那么以您的方式引用您的字体应该没问题。据推测它就是这样,所以当某些浏览器无法正确渲染字体时,它们会出现退缩