如何添加一些非标准字体的网站?

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

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

当前回答

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

2008-09-20 11:33:07

其他回答

它看起来只适用于ie浏览器，但是在谷歌上快速搜索“html嵌入字体”会得到http://www.spoono.com/html/tutorials/tutorial.php?id=19

如果你想保持平台无关性(你应该!)，你就必须使用图像，或者使用标准字体。

2008-09-20 11:39:12

您可以通过谷歌Web字体添加一些字体。

从技术上讲，字体驻留在谷歌，您可以将它们链接到HTML标头中。然后，你可以在CSS中使用@font-face(阅读它)自由使用它们。

例如:

在<head>节中:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

然后在CSS中:

h1 { font-family: 'Droid Sans', arial, serif; }

这个解决方案似乎相当可靠(甚至Smashing Magazine也用它作为文章标题)。然而，目前谷歌字体目录中可用的字体并不多。

2010-06-28 07:08:22

@font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}

2020-09-29 23:57:15

我发现在网站上使用非标准字体最简单的方法是使用sIFR

它确实涉及到包含字体的Flash对象的使用，但如果没有安装Flash，它会很好地降级为标准文本/字体。

样式在CSS中设置，JavaScript为文本设置Flash替换。

编辑:(我仍然建议使用非标准字体的图像，因为sIFR会增加项目的时间，并且可能需要维护)。

2008-09-20 11:35:01

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

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

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

2012-09-12 15:30:55

如何添加一些非标准字体的网站?

推荐文章

最新文章

标签