有没有一种方法可以在网站上添加一些自定义字体,而不使用图像,Flash或其他图形?
例如,我在一个婚礼网站上工作,我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像,这可能吗?
有没有一种方法可以在网站上添加一些自定义字体,而不使用图像,Flash或其他图形?
例如,我在一个婚礼网站上工作,我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像,这可能吗?
当前回答
它看起来只适用于ie浏览器,但是在谷歌上快速搜索“html嵌入字体”会得到http://www.spoono.com/html/tutorials/tutorial.php?id=19
如果你想保持平台无关性(你应该!),你就必须使用图像,或者使用标准字体。
其他回答
字体.js和Cufon是另外两个有趣的选项。它们是JavaScript组件,通过除Internet Explorer以外的所有新浏览器中的<canvas>元素和Internet Explorer中的VML以JSON格式呈现特殊字体数据(您可以在其网站上从TrueType或OpenType格式转换)。
两者的主要问题(到目前为止)都是选择文本不工作,或者至少工作起来相当笨拙。
尽管如此,它还是很适合做头条新闻。正文……我不知道。
而且速度惊人。
也可以使用WOFF字体-例如这里
@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
}
我发现在网站上使用非标准字体最简单的方法是使用sIFR
它确实涉及到包含字体的Flash对象的使用,但如果没有安装Flash,它会很好地降级为标准文本/字体。
样式在CSS中设置,JavaScript为文本设置Flash替换。
编辑:(我仍然建议使用非标准字体的图像,因为sIFR会增加项目的时间,并且可能需要维护)。
Safari和Internet Explorer都支持CSS @font-face规则,但是它们支持两种不同的嵌入式字体类型。Firefox计划在不久的将来支持与Apple相同的类型。SVG可以嵌入字体,但还没有得到广泛支持(没有插件)。
我认为我所见过的最可移植的解决方案是使用JavaScript函数将标题等替换为生成的图像,并使用你所选择的字体缓存在服务器上——这样你就可以简单地更新文本,而不必在Photoshop中进行处理。
如果你说的非标准字体,你指的是标准格式的自定义字体,下面是我怎么做的,它适用于我目前为止检查过的所有浏览器:
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}
所以你只需要TTF和eot字体。网上的一些工具可以进行转换。
但如果你想附加非标准格式的字体(位图等),我不能帮助你。