有没有一种方法可以在网站上添加一些自定义字体,而不使用图像,Flash或其他图形?
例如,我在一个婚礼网站上工作,我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像,这可能吗?
有没有一种方法可以在网站上添加一些自定义字体,而不使用图像,Flash或其他图形?
例如,我在一个婚礼网站上工作,我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像,这可能吗?
当前回答
请参阅文章《美丽网页排版的50个有用的设计工具》以获得其他方法。
我只用过Cufon。我发现它很可靠,很容易使用,所以我一直用它。
其他回答
只需简单地提供链接到实际的字体像这样,你就会很好
<!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>
这可以通过CSS来完成:
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
如果你使用TrueType-Fonts (TTF), Web Open Font Format (WOFF)或Embedded Opentype (EOT),所有常规浏览器都支持它。
您可以通过谷歌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也用它作为文章标题)。然而,目前谷歌字体目录中可用的字体并不多。
《IE中的字体面:让Web字体正常工作》一文中说,它适用于所有三种主要浏览器。
这是我得到的一个工作样本:http://brendanjerwin.com/test_font.html
更多的讨论在嵌入字体中。
也可以使用WOFF字体-例如这里
@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
}