如何显示没有安装在客户端计算机上而是安装在服务器上的网站字体

Question

我看到许多网站使用不同的字体，这些字体不在我的计算机中，但它们显示在我的浏览器中。这些页面的源代码包括以下脚本:

http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js

这个脚本是什么?使用这样的网页字体安全吗?

Answer 1

CSS的@font-face规则实现了这一点。但是，有一些注意事项:

1. 因为不是所有的浏览器都能理解相同的字体格式，你必须为你的字体指定不同的格式。大多数授权的前线提供了一个网页版本，这是一个"组合"压缩文件，包括不同格式的CSS和字体文件。你也可以用fontsquirrel的webfont生成器生成你的"combo"文件，只需上传你的字体文件。

2. 不是所有的浏览器都能生成粗体或斜体版本的所有字体，所以使用提供粗体和斜体版本的字体是一个很好的选择。

3. 字体不会在所有浏览器和操作系统中呈现完全相同。你会发现细微的差异，特别是在抗混叠、字母宽度和阴影效果方面。

4. 如果你想要完美的字体渲染(ps)，你不能使用font-face。您必须使用更复杂的方法cufón，这是一种基于javascript的方法来呈现字体，比font-face方法(IMHO)复杂得多。

这是一个示例代码:

@font-face {
  /*This loads the font file into a new font family value */
  font-family: myFirstFont;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot'); /* IE9 */
}
DIV { font-family: myFirstFont; }

Answer 2

是的，webfont加载器是完全安全的…它只是webfonts的一个Javascript替代品，它提供了比Google Fonts API提供的更多的字体加载控制。Web Font Loader还允许您使用多个Web字体提供程序。

我仍然这样做的老方法…:)我在下面列出了……

你可以去谷歌下载你想要的字体…http://www.google.com/fonts/

然后你把它添加到你的网站，像这样…(我用的例子字体是'Balthazar')

<link href='http://fonts.googleapis.com/css?family=Balthazar' rel='stylesheet' type='text/css'>

或者只是一个CSS @import到你的CSS文件中，像这样…两种方法都可以。

@import url(http://fonts.googleapis.com/css?family=Balthazar);

然后在CSS中访问，比如....

font-family: 'Balthazar', serif;

Answer 3

您也可以使用font-face技术。就像我一直在到处寻找贝巴斯新常规字体。我把它装上了字体。这样做:下载字体套件…示例(Font-Squirrel) - http://www.fontsquirrel.com/fonts/bebas-neue

上传文件到网站服务器

CSS

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

}

确保目录路径指向服务器上上传的文件。

在你想渲染字体的地方使用font-family: 'BebasNeueRegular';。

希望对你有帮助。