有没有一种方法可以在网站上添加自定义字体，而不使用图片、Flash或其他图形技术？
例如，我正在制作一个婚礼网站，发现有很多适合这个主题的漂亮字体。但是我找不到正确的方法将该字体添加到服务器上。那么如何通过CSS将该字体包含在HTML中呢？是否可以在不使用图形技术的情况下完成这项操作？
21个回答
4
如果您使用ASP.NET，那么生成基于图像的字体非常容易，而无需在服务器上安装字体（例如添加到已安装的字体库）可以通过以下方式实现：
PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];
然后使用该字体在 Graphics 上进行绘制。
- mattlant
2
1嗯，是的...而且您的用户可以忘记复制和粘贴了。在旧浏览器中也不能缩放。我甚至不谈带宽问题！ - Bite code
2是的，好的，问题指定它将用于内容文本？不，它没有，这是一个一般性的问题，这是一个一般性的答案。小的文本片段、标题等不会占用大量带宽。天哪，冷静点！ - mattlant
3
只需像这样提供实际字体的链接，您就可以顺利进行。
<!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>
- Abhijeet Kumar
1
一个好的简单替代方案。而且您肯定有权使用它。请访问https://developers.google.com/fonts/docs/getting_started。 - Tim Erickson
3
似乎只能在Internet Explorer中使用，但快速谷歌搜索“html嵌入字体”可以得到http://www.spoono.com/html/tutorials/tutorial.php?id=19
如果您想保持平台无关性（并且您应该这样做！），则必须使用图像，否则只能使用标准字体。
- James Muscat
3
我做了一些研究，找到了一个名为动态文本替换的技术（发布于2004年6月15日）。
这种技术使用图像，但它似乎是“无需操作”的。你编写你的文本，然后让几个自动化脚本在页面上进行自动查找和替换。
它有一些限制，但它可能是比我见过的所有其他选择更容易（且更兼容各种浏览器）的选择之一。
这种技术使用图像，但它似乎是“无需操作”的。你编写你的文本，然后让几个自动化脚本在页面上进行自动查找和替换。
它有一些限制，但它可能是比我见过的所有其他选择更容易（且更兼容各种浏览器）的选择之一。
- Kent Fredric
3
还可以使用WOFF字体 - 例如这里
@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
}
- Wilf
2
Typeface.js的JavaScript方式：
使用typeface.js，您可以在网页中嵌入自定义字体，因此无需将文本渲染为图像。
与创建图像或使用Flash以显示所需字体的站点图形文本相反，您可以使用typeface.js并编写纯HTML和CSS，就像访问者已经在本地安装了字体一样。
- bakkal
2
如果你有字体文件，那么你需要为其他浏览器添加更多的字体格式。
为此，我使用像Fontsquirrel这样的字体生成器，它提供所有的字体格式和@font-face CSS，你只需要将其拖放到你的CSS文件中即可。
为此，我使用像Fontsquirrel这样的字体生成器，它提供所有的字体格式和@font-face CSS，你只需要将其拖放到你的CSS文件中即可。
- saadeez
1
@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");
}
- Hello Hack
1
0
简单的解决方案是在 CSS 中使用 @font-face。
@font-face {
font-family: myFirstFont;
src: url(fileLocation);}
div{
font-family: myfirstfont;}
- Ajay Sahu
1
请确保您的回答基于之前的答案提供了新的见解或改进方法。如果您的回答包含微妙但相关的好处，请详细说明。如果没有，请考虑删除您的回答。 - herrstrietzel
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
@font-face得到了广泛支持并建议进行一般使用。你只需要知道IE需要不同格式的字体才能与其他浏览器兼容。请参见https://dev59.com/AXE95IYBdhLWcg3wp_kg。 - David Johnstone