有没有一种方法可以在网站上添加一些自定义字体,而不使用图像,Flash或其他图形?
例如,我在一个婚礼网站上工作,我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像,这可能吗?
有没有一种方法可以在网站上添加一些自定义字体,而不使用图像,Flash或其他图形?
例如,我在一个婚礼网站上工作,我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像,这可能吗?
当前回答
只需简单地提供链接到实际的字体像这样,你就会很好
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>
<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>
其他回答
您可以使用@import url(url)导入web字体。您必须将url替换为字体源(完整的web源)。
或者你可以试试sIFR。我知道它使用Flash,但只有在可用的情况下。如果Flash不可用,它将以原始(CSS)字体显示原始文本。
我发现在网站上使用非标准字体最简单的方法是使用sIFR
它确实涉及到包含字体的Flash对象的使用,但如果没有安装Flash,它会很好地降级为标准文本/字体。
样式在CSS中设置,JavaScript为文本设置Flash替换。
编辑:(我仍然建议使用非标准字体的图像,因为sIFR会增加项目的时间,并且可能需要维护)。
W3C为此推荐的技术称为“嵌入”,这里有三篇文章对其进行了详细描述:嵌入字体。在我有限的实验中,我发现这个过程容易出错,而且在多浏览器环境中使用它的成功程度有限。
如果你说的非标准字体,你指的是标准格式的自定义字体,下面是我怎么做的,它适用于我目前为止检查过的所有浏览器:
@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字体。网上的一些工具可以进行转换。
但如果你想附加非标准格式的字体(位图等),我不能帮助你。