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

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

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

当前回答

《IE中的字体面:让Web字体正常工作》一文中说，它适用于所有三种主要浏览器。

这是我得到的一个工作样本:http://brendanjerwin.com/test_font.html

更多的讨论在嵌入字体中。

2009-02-25 22:56:00

其他回答

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

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

2016-02-11 05:37:36

这可以通过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)，所有常规浏览器都支持它。

2008-09-20 11:35:52

您可以通过谷歌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

只需简单地提供链接到实际的字体像这样，你就会很好

<!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>

2017-11-11 16:11:09

Safari和Internet Explorer都支持CSS @font-face规则，但是它们支持两种不同的嵌入式字体类型。Firefox计划在不久的将来支持与Apple相同的类型。SVG可以嵌入字体，但还没有得到广泛支持(没有插件)。

我认为我所见过的最可移植的解决方案是使用JavaScript函数将标题等替换为生成的图像，并使用你所选择的字体缓存在服务器上——这样你就可以简单地更新文本，而不必在Photoshop中进行处理。

2008-09-20 11:43:39

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

推荐文章

最新文章

标签