Question

我正在为某人开发一个网站，但他们希望（坚持）标题是非标准字体。（客户总是对的。）我有TrueType（.ttf）字体但是如何将其与网站捆绑在一起以便它使用？

我尝试将其放入Images文件夹并尝试使用样式表访问它：

font-family:URL(Images/Arial_Rounded_MT_Bold.ttf)

但那没用。如何以呈现的方式包含非标准字体？

如果它有用，这是一个ASP.NET 2.0站点。

Answer 1

目前没有标准方法可以做到这一点。您可以使用@font-face，但并非所有浏览器都支持此功能。如Lance所述，this是查找主要浏览器支持参考的好地方。

努力使这类事物标准化。 Web Open Font Format（WOFF）就是这样的努力。看起来这可能会被未来主流浏览器采用。我们将不得不拭目以待。

目前，您可以做的最好的方法是像往常一样引用您的字体，但之后添加默认（标准）字体。

font-family: "Arial Rounded MT Bold", "Times New Roman", Serif

Answer 2

您有两种选择：

创建图片而不是使用文字
使用sifr将文字转换为.ttf字体

Answer 3

你有很多选择，没有一个是完美的。 Smashing Magazine有一篇关于丰富字体的精彩文章 - 其中大部分涉及闪存/图像替换。

http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/

Answer 4

Convert your TrueType font into an Embedded OpenType font（很简单！）所以你有两个字体文件：

Arial_Rounded_MT_Bold.ttf
Arial_Rounded_MT_Bold.eot

然后让你的CSS看起来像这样：

@font-face {
  font-family: 'Arial Rounded Bold';
  src: url('Arial_Rounded_MT_Bold.eot');
}
@font-face {
  font-family: 'Arial Rounded Bold';
  src: url('Arial_Rounded_MT_Bold.ttf') format('truetype');
}
h1.title {
  font-family: 'Arial Rounded Bold', serif;
}

感谢Internet Explorer，EOT规范必须首先在一个单独的@font-face块中，而不是format属性。更多信息here。

享受！

Answer 5

关于分发字体和网站的主题有相当多的活动，但它通常处于试验阶段，并且不适用于绝大多数使用中的浏览器。在几年内你可以做到这一点，但目前你必须使用图像或sIFR。

如何将自定义TrueType字体打包到网站，以便浏览器呈现它？

5 个答案: