代码之家 › 专栏 › 技术社区 › leora Matt Lacey

网站上的书法字体

photoshop fonts css html

leora Matt Lacey · 技术社区 · 14 年前

如果我想有一些文字显示在书法字体,我如何知道它将如何呈现给用户的电脑。我怎么知道那个人在电脑上用的是什么字体,或者它有什么关系?在css中有什么很好的例子吗?

把一些东西放在photoshop中并保存为图像会更好吗?

4 回复 | 直到 14 年前

sidcom 14 年前

如果你使用字体的标题和花哨的网页元素不会经常改变,我会使用一个图片从photoshop。

如果你想使用字体作为文本的主体,我建议你在css中定义一个字体系列。我会找到你想在你的当前操作系统上使用的字体,如果它是一个字体,你找到并下载的机会是最终用户不会有它。如果它是一种系统字体或一种主要软件应用程序(如ms-word)附带的字体,那么它很有可能在最终用户机器上可用。一旦你找到了你想使用的字体,我会做一些研究,看看你是否能找到类似的Mac风格,甚至Unix风格。

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

使用备份字体总是很好的,你知道它会在任何人的机器上工作浏览器会在列表中选择最适用的字体,从第一个指定的字体开始,直到找到匹配为止。

amphetamachine 14 年前

您可以将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。

微软已经发布了 document 关于如何使用 Embedded OpenType 格式。它包括将字体转换为EOT文件,然后使用以下语法在样式表中引用它:

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

(这是从官方在线演示中提取的 here )

根据boldewyn下面的回答,我敢打赌您也可以在 src: 参数。

Dave Gregory 14 年前

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

第一。。这些问题。这是静态文本还是我们在谈论帖子标题等。

如果静态文本与主标题类似,则使用图像。
<h1><strong>Same text as the image(seo)</strong></h1>

在css中 h1{背景:url(/images/use the text as image name for seo.png)不重复左上角;宽度:100px;高度:30px;}/*宽度和高度为图像宽度/高度 / h1强{位置:绝对;左:-8000px;}/ 确保文本不会出现在图像上,也不会为了搜索引擎优化/屏幕阅读器的目的而隐藏它*/

如果你说的是一些需要动态的东西,你需要的不仅仅是优雅的脱脂,那么就用sifr。如果可接受优雅的脱脂,则 @字体

Boldewyn 14 年前

添加到 @font-face 支持者: Paul Irish 发布了这个css声明的一个版本,它适用于所有更新的浏览器以及ie5.5之前的所有ie。但是,您需要同时使用ttf和eot格式的字体才能使用此技术。

如果您的字体许可证允许这样做,有很多工具可以在格式之间来回转换。谷歌就可以了。