0

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

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

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

4

3 回答 3

4

CSS @font-face规则使这种情况发生。但是，有一些注意事项：

  1. 由于并非所有浏览器都理解相同的字体格式，因此您必须为您的字体指定不同的格式。大多数获得许可的前端都提供网络版本，这是一个“组合”压缩文件，包括 CSS 和不同格式的字体文件。您还可以使用fontsquirrel 的 webfont 生成器生成您的“组合”文件，只需上传您的字体文件。

  2. 并非所有浏览器都可以生成所有字体的粗体或斜体版本，因此使用提供粗体和斜体版本的字体是一个不错的选择。

  3. 字体不会在所有浏览器和操作系统中呈现完全相同。您会发现细微差别，尤其是在抗锯齿、字母宽度和阴影效果方面。

  4. 如果你想要完美的字体渲染（类似photoshop），你不能使用font-face。您必须使用一种称为cufón的更复杂的方法，它是一种基于 javascript 的字体渲染方法，并且比 font-face 方法 (恕我直言) 复杂得多。

这是一个示例代码：

@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; }
于 2013-06-11T03:33:59.567 回答
3

是的，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;
于 2013-06-11T03:16:30.880 回答
3

你也可以使用字体技术。就像我在寻找 Bebas Nueu Regular 字体的高低一样。我把它加载了字体。这样做：下载字体套件...示例（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';您希望字体呈现的位置。

希望有帮助。

于 2013-06-11T03:24:29.807 回答