将任何字体添加到HTML页面

Question

新手问题：我可以将任何字体嵌入HTML中吗？例如罗克韦尔字体？

谢谢！

Answer 1

是。 FontFamilyName就是你要调用它的地方和src：url（'/ font / font.otf'）;是字体文件的链接（很像使用背景图像）。

@font-face {
    font-family: FontFamilyName;
    font-weight: bold;
    src: url('/font/font.otf');
}

然后，您可以像任何其他字体系列一样使用该字体。例如：

p
{
font-family: FontFamilyName;
}

Answer 2

Google提供了一项名为Webfonts的非常好的服务，请查看它！

Answer 3

如果您按照bulletproof font-face syntax进行操作，则可以将大部分字体嵌入网页。

您可以使用free font-conversion service like font squirrel将字体转换为支持所有浏览器所需的格式：）

Answer 4

查看允许您在页面上使用任何字体的 @font-face - 如果用户没有安装该字体，可以从服务器下载并用于渲染网页。

一个例子

@font-face {
    font-family: DeliciousRoman;
    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
    font-weight:400;
}

请查看 font-face 网站了解详情。请注意，@ font-face存在一些跨浏览器问题 - 为此，我建议您在这方面查看 stellar work of Paul Irish 。

Answer 5

可以在样式表中使用@ font-face，但你必须记住IE并不总能正确处理这些问题。使用此代码：

@font-face {
    font-family: (the name you want to call it by);
    src: url('path/to/font.eof');
}

您也可以使用.otf或.ttf。

Answer 6

不是真的。如果要确保页面在不同浏览器中显示相同，则限制为cross-browser个字体。

话虽这么说，有一个名为Typekit的有趣服务可以让你使用JS和CSS3嵌入字体。它仅适用于现代浏览器。