我看到许多网站使用不同的字体,这些字体不在我的电脑中,但在我的浏览器中显示。这些页面的源代码包括以下脚本:
http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js
这个脚本是什么?使用这样的网络字体安全吗?
我看到许多网站使用不同的字体,这些字体不在我的电脑中,但在我的浏览器中显示。这些页面的源代码包括以下脚本:
http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js
这个脚本是什么?使用这样的网络字体安全吗?
CSS @font-face规则使这种情况发生。但是,有一些注意事项:
由于并非所有浏览器都理解相同的字体格式,因此您必须为您的字体指定不同的格式。大多数获得许可的前端都提供网络版本,这是一个“组合”压缩文件,包括 CSS 和不同格式的字体文件。您还可以使用fontsquirrel 的 webfont 生成器生成您的“组合”文件,只需上传您的字体文件。
并非所有浏览器都可以生成所有字体的粗体或斜体版本,因此使用提供粗体和斜体版本的字体是一个不错的选择。
字体不会在所有浏览器和操作系统中呈现完全相同。您会发现细微差别,尤其是在抗锯齿、字母宽度和阴影效果方面。
如果你想要完美的字体渲染(类似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; }
是的,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;
你也可以使用字体技术。就像我在寻找 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';
您希望字体呈现的位置。
希望有帮助。