Question

如果我想用书法字体显示一些文字，我怎么知道它将如何呈现用户计算机。我怎么知道这个人在电脑上有什么字体或者它有什么关系？在css中做这个的好例子吗？

我会更好地在photoshop中放一些东西并保存为图像吗？

Answer 1

您可以将TTF字体文件嵌入CSS中。

一个很好的例子是here：

/* DejaVu Sans 2.24
   http://dejavu.sourceforge.net/wiki/index.php/Main_Page */
@font-face {
    font-family: "DejaVu Sans";
    src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]")
}

修改

注意：这只适用于Firefox，可能还适用于Chrome。

Microsoft已发布document有关如何使用Embedded OpenType格式将字体嵌入网页的信息。它涉及将字体转换为EOT文件，然后使用以下语法在样式表中引用它：

@font-face {
    font-family: Piefont;
    font-style:  normal;
    font-weight: normal;
    src: url(PIE0.eot);
}

（这是从官方在线演示中提取的here）。

根据下面的Boldewyn的回答，我敢打赌你也可以在src:参数中使用TTF文件。

Answer 2

如果您使用的字体标题和花哨的页面元素不会经常更改，我会使用photoshop中的图像。

如果你想使用文本主体的字体，我建议在css中定义一个字体系列。我会找到你想要在你当前的操作系统上使用的字体，如果你找到的字体和下载的机会是最终用户没有它。如果它是一个系统字体或一个主要软件应用程序附带的字体，如ms word，它很有可能在最终用户机器上可用。一旦你找到了你想要使用的字体，我就会做一些研究，看看你是否能找到类似于mac风味甚至是Unix风格的东西。

body
{
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman"
}

使用你知道可以在任何人的机器上运行的备份字体总是很好的浏览器将从列表中选择最适用的字体，从第一个字体开始，直到找到匹配为止。

Answer 3

我倾向于在我的个人网站上使用@font-face ..但这取决于你在做什么。

首先......问题。这是静态文本还是我们在讨论帖子标题等。

如果静态文字（如主标题）与图像一起使用 <h1><strong>Same text as the image(seo)</strong></h1>

并在CSS中 h1 {background：url（/images/use-the-text-as-image-name-for-seo.png）不重复左上角;宽度：100像素;高度：30px;} / *宽度和高度是图像宽度/高度 / h1 strong {position：absolute; left：-8000px;} / 确保文本不会显示在图像上，但不会为seo /屏幕阅读器目的隐藏它* /

如果您正在谈论需要动态的事情，并且您需要的不仅仅是优雅的降级，请使用sIFR。如果可以接受优雅的降级，请使用@font-face

Answer 4

要添加到@font-face支持者：Paul Irish发布了此CSS声明的版本，该版本适用于所有较新的浏览器以及IE5.5以下的所有IE。但是，您需要使用TTF和EOT格式的字体才能使用此技术。

如果你的字体的许可证允许这样做，有很多工具可以在格式之间来回转换。只需谷歌吧。

在网站上的书法字体

4 个答案: