有没有办法在不使用图像、Flash 或其他图形的情况下在网站上添加一些自定义字体？
例如，我在一个婚礼网站上工作，我为这个主题找到了很多不错的字体。但我找不到在服务器上添加该字体的正确方法。以及如何将带有 CSS 的字体包含到 HTML 中？这可以在没有图形的情况下完成吗？
@font-face 得到了更广泛的支持，并被推荐用于一般用途。您只需要知道 IE 需要与其他浏览器不同格式的字体。请参阅stackoverflow.com/questions/2219916/is-font-face-usable-now
这可以通过 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)，则为 supported for all of the regular browsers。
您可以通过 Google Web Fonts 添加一些字体。
从技术上讲，这些字体由 Google 托管，您可以在 HTML 标头中链接它们。然后，您可以通过 @font-face (read about it) 在 CSS 中自由使用它们。
例如：
在 <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 uses it for an article title.）。然而，到目前为止，Google Font Directory 中可用的字体并不多。
可行的方法是使用@font-face CSS 声明，它允许作者指定在线字体以在其网页上显示文本。通过允许作者提供自己的字体，@font-face 消除了依赖用户在其计算机上安装的有限数量的字体的需要。
看看下表：
https://i.stack.imgur.com/fFhYS.png
如您所见，主要由于跨浏览器兼容性，您需要了解几种格式。移动设备中的情况并没有太大的不同。
解决方案：
1 - 完全浏览器兼容性
这是目前支持最深的方法：
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
2 - 大多数浏览器
事情是shifting heavily toward WOFF，所以你可能会逃脱：
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
3 - 只有最新的浏览器
甚至只是 WOFF。然后你像这样使用它：
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
参考资料和延伸阅读：
这主要是您在实现此功能时需要了解的内容。如果您想对该主题进行更多研究，我鼓励您查看以下资源。我放在这里的大部分内容都是从以下内容中提取的
使用字体（非常推荐）
Bulletproof @font-face 语法
我可以使用@font-face 网络字体吗？
如何归档跨浏览器@font-face 支持
@font-face 在 CSS Mozilla 开发者网络
svgFontName 代表什么？我应该将其更改为我的字体系列名称还是保持原样？
如果使用非标准字体，您的意思是标准格式的自定义字体，我就是这样做的，它适用于我迄今为止检查过的所有浏览器：
@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 字体。一些在线可用的工具可以进行转换。
但是如果你想附加非标准格式的字体（位图等），我帮不了你。
我发现在网站上使用非标准字体的最简单方法是使用 sIFR
它确实涉及使用包含字体的 Flash 对象，但如果未安装 Flash，它会很好地降级为标准文本/字体。
样式在您的 CSS 中设置，JavaScript 为您的文本设置 Flash 替换。
编辑：（我仍然建议将图像用于非标准字体，因为 sIFR 会增加项目时间并且可能需要维护）。
@font-face 在受支持的情况下要好得多。
文章Font-face in IE: Making Web Fonts Work 说它适用于所有三种主要浏览器。
这是我开始工作的示例：http://brendanjerwin.com/test_font.html
Embedding Fonts 中有更多讨论。
Typeface.js 和 Cufon 是另外两个有趣的选项。它们是 JavaScript 组件，通过新的 <canvas> 呈现 JSON 格式的特殊字体数据（您可以在他们的网站上从 TrueType 或 OpenType 格式转换）。除了 Internet Explorer 和通过 Internet Explorer 中的 VML 之外的所有较新浏览器中的元素。
两者的主要问题（截至目前）是选择文本不起作用或至少只能非常笨拙地起作用。
尽管如此，它仍然非常适合头条新闻。正文...我不知道。
而且速度出奇的快。
W3C 推荐的用于执行此操作的技术称为“嵌入”，此处的三篇文章对此进行了很好的描述：Embedding Fonts。在我有限的实验中，我发现这个过程容易出错，并且在使其在多浏览器环境中运行方面取得的成功有限。
Safari 和 Internet Explorer 都支持 CSS @font-face 规则，但是它们支持两种不同的嵌入字体类型。 Firefox 计划在不久的将来支持与 Apple 相同的类型。 SVG 可以嵌入字体，但还没有得到广泛支持（没有插件）。
我认为我见过的最便携的解决方案是使用 JavaScript 函数用您选择的字体生成并缓存在服务器上的图像替换标题等 - 这样您只需更新文本而不必Photoshop中的东西。
如果您使用 ASP.NET，生成基于图像的字体非常容易，而无需在服务器上实际安装（如添加到已安装的字体库）字体，方法是使用：
PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];
然后使用该字体在 Graphics 上绘图。
看起来它只能在 Internet Explorer 中使用，但在 Google 上快速搜索“html embed fonts”会产生 http://www.spoono.com/html/tutorials/tutorial.php?id=19
如果你想保持与平台无关（你应该！），你将不得不使用图像，或者只使用标准字体。
我做了一些研究并找到了Dynamic Text Replacement（2004-06-15 发布）。
这种技术使用图像，但它似乎是“免提”的。您编写文本，并让一些自动化脚本在页面上为您自动查找和替换。
它有一些限制，但它可能是比我见过的所有其他选择更容易的选择之一（并且与浏览器更兼容）。
也可以使用 WOFF 字体 - 例如 here
@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
}
只需简单地提供这样的实际字体的链接，你就可以开始了
<!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>
Typeface.js JavaScript 方式：
使用 typeface.js，您可以在网页中嵌入自定义字体，这样您就不必将文本渲染到图像中，您可以使用 typeface.js，而不是创建图像或使用 flash 来以您想要的字体显示网站的图形文本并用纯 HTML 和 CSS 编写，就像您的访问者在本地安装了字体一样。
如果您有字体文件，那么您将需要为其他浏览器添加更多格式的该字体。
为此，我使用像 Fontsquirrel 这样的字体生成器，它提供了所有的字体格式 &它的@font-face CSS，你只需要拖动 &将其放入您的 CSS 文件中。
@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");
}
简单的解决方案是在 css 中使用 @fontface
@font-face {
font-family: myFirstFont;
src: url(fileLocation);}
div{
font-family: myfirstfont;}
关注公众号
不定期副业成功案例分享
