有没有一种方法可以在网站上添加一些自定义字体,而不使用图像,Flash或其他图形?

例如,我在一个婚礼网站上工作,我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像,这可能吗?


当前回答

或者你可以试试sIFR。我知道它使用Flash,但只有在可用的情况下。如果Flash不可用,它将以原始(CSS)字体显示原始文本。

其他回答

字体.js和Cufon是另外两个有趣的选项。它们是JavaScript组件,通过除Internet Explorer以外的所有新浏览器中的<canvas>元素和Internet Explorer中的VML以JSON格式呈现特殊字体数据(您可以在其网站上从TrueType或OpenType格式转换)。

两者的主要问题(到目前为止)都是选择文本不工作,或者至少工作起来相当笨拙。

尽管如此,它还是很适合做头条新闻。正文……我不知道。

而且速度惊人。

或者你可以试试sIFR。我知道它使用Flash,但只有在可用的情况下。如果Flash不可用,它将以原始(CSS)字体显示原始文本。

也可以使用WOFF字体-例如这里

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }

如果你说的非标准字体,你指的是标准格式的自定义字体,下面是我怎么做的,它适用于我目前为止检查过的所有浏览器:

@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字体。网上的一些工具可以进行转换。

但如果你想附加非标准格式的字体(位图等),我不能帮助你。

如果您有一个字体文件,那么您将需要为其他浏览器添加该字体的更多格式。

出于这个目的,我使用Fontsquirrel这样的字体生成器,它提供了所有的字体格式和它的@font-face CSS,你只需要将它拖放到你的CSS文件中。