如何在网站上添加一些非标准字体？

518

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

例如，当我在一个婚礼网站上工作时，我发现了很多适合该主题的字体。但是我找不到在服务器上添加该字体的正确方法。以及如何在CSS中将该字体与CSS结合在一起？没有图形就可以做到吗？

html  css  fonts  font-face 
— 瓦斯克
source
18
自从问了这个问题以来，@font-face它得到了越来越广泛的支持，推荐用于一般用途。您只需要知道IE需要与其他浏览器使用不同格式的字体。参见stackoverflow.com/questions/2219916/is-font-face-usable-now
— David Johnstone
10
确保您有权分发字体！
— 越战
2
访问typekit.com或以便宜的fontsquirrel.com
— bjudson 2010年
1
— 阿德里安要
3
www.fontsquirrel.com看起来很棒，可以生成所需的字体文件并创建良好的防弹@fontface语法（与推荐的fontspring.com/blog/fixing-ie9-font-face-problems相同）
— Adrien Be

Answers:

500

这可以通过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字体（TTF）或Web开放字体格式（WOFF），则所有常规浏览器均支持该功能。

— 83％
source
13
Internet Explorer和Firefox都不基于Webkit，因此在我看来，这是一个毫无用处的解决方案。
— 卡斯珀
58
它不是无用的，因为它是标准的：您实现的次数越多，浏览器实现的次数就越多。这并不意味着您不应该找到另一种补偿方法，但是将其作为补充对我来说似乎是件好事。
— e-satis
8
Firefox 3.1确实支持@ font-face。
— Ms2ger
2
@brendanjerwin：您的链接的更新版本- brendanjerwin.com/development/web/2009/03/03/...
— 马特·鲍尔
60
大家好，您猜怎么着？现在快到2016年了！现在得到广泛支持！好极了！很高兴，我最近发现了这个答案。哈哈。
— jessica
121

您可以通过Google网络字体添加一些字体。

从技术上讲，这些字体托管在Google上，您可以在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都将其用作文章标题。）。但是，到目前为止，Google字体目录中没有可用的字体太多。

— MichałPękała
source
1
2014年7月，google扩展了字体，并包含了支持大多数语言google.com/get/noto/#的 Google Noto字体。Abobe支持了支持所有语言的开放字体倡议，Blog.typekit.com
— 2014/
似乎（Google网络字体）不支持.eot，.woff和.svg版本的字体。它只支持.ttf版本的字体！
— Mahdi Jazini
77

可行的方法是使用@ font-face CSS声明，该声明允许作者指定在线字体以在其网页上显示文本。通过允许作者提供自己的字体，@ font-face消除了依赖用户在计算机上安装的字体数量有限的需要。

看一下下表：

在此处输入图片说明

如您所见，主要由于跨浏览器的兼容性，您需要了解几种格式。移动设备中的情况没有太大不同。

解决方案：

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-大多数浏览器

事情正在朝着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;
}

参考资料和进一步阅读：

这主要是您需要了解的有关实现此功能的知识。如果您想对该主题进行更多研究，我鼓励您看一下以下资源。我在这里输入的大部分内容摘自以下内容

— 哈维尔·卡迪斯
source
2
极为方便的Font Squirrel工具可以生成完整浏览器支持所需的CSS。它甚至可以让您以这些格式中的任何一种来上载字体，将其转换为所有其他格式，并可以全部下载。自定义字体可以节省生命。
— Jacob Stamm
代表什么svgFontName？我应该将其更改为字体家族名称还是保留原样？
— Gherman
17

如果使用非标准字体，则表示标准格式的自定义字体，这是我的操作方法，它适用于到目前为止我检查过的所有浏览器：

@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字体。某些在线可用的工具可以进行转换。

但是，如果您想附加非标准格式的字体（位图等），我无济于事。

— BiAiB
source
1
联机工具示例：kirsle.net/wizards/ttf2eot.cgi脱机工具示例：code.google.com/p/ttf2eot/wiki/Demo-也应该可以使用WOFF字体。
— 威尔夫
11

我发现在网站上使用非标准字体的最简单方法是使用sIFR

它确实涉及使用包含字体的Flash对象，但是如果未安装Flash，它将很好地降级为标准文本/字体。

样式是在CSS中设置的，JavaScript会为您的文本设置Flash替换。

编辑：（我仍然建议将图像用于非标准字体，因为sIFR会增加项目时间，并且可能需要维护）。

— 马特
source
24
多么可怕的主意！我的浏览器中有Flash，但也有Flashblock。在该网站上，我的浏览器显示了一个肮脏的污损页面。Flash应该保留用于大型动画或电影的内容。太多的闪光令人厌烦和视觉疲劳，我的天哪
— e-satis
2
@ e-satis：怎么样？就个人而言，除了细微的文本呈现差异之外，我从未注意到使用sIFR的页面与未使用sIFR的页面之间的区别。老实说，我认为这是一个好主意，尽管@font-face在支持下要好得多。
— Sasha Chedygov
“编辑：（我仍然建议将图像用于非标准字体，因为sIFR会增加项目时间，并且可能需要维护）。” 说得好。sIFR是一种非常酷的技术，但要获得所需的精确外观似乎需要很多。如果您有时间学习和掌握这项技术，我强烈建议您使用。但是，如果您正在寻找一种快速简便的字体替换技术，则可以使用图像替换甚至@ font-face css属性
— Derek Adair 2010年
10

Typeface.js和Cufon是另外两个有趣的选项。他们是渲染JSON格式的特殊字体数据（你可以从转换JavaScript组件的TrueType或OpenType字体通过新的<canvas>元素中除了IE，并通过所有新的浏览器格式在其网站上）VML在Internet Explorer中。

两者的主要问题（到目前为止）是选择文本不起作用，或者至少只能非常笨拙地起作用。

尽管如此，对于头条新闻还是很好的。正文...我不知道。

而且速度惊人。

— 汤玛士
source
另一个有趣的选择是typekit.com类似的概念。
— Zack
8

或者，您可以尝试sIFR。我知道它使用Flash，但前提是可用。如果没有Flash，它将以其原始（CSS）字体显示原始文本。

— 卡斯珀
source
4

W3C为此推荐的技术称为“嵌入”，并且在这里的三篇文章中都有很好的描述：嵌入字体。在有限的实验中，我发现此过程容易出错，并且使其在多浏览器环境中运行的成功有限。

— 史蒂夫·莫耶
source
4

Safari和Internet Explorer都支持CSS @ font-face规则，但是它们支持两种不同的嵌入式字体类型。Firefox计划不久后支持与Apple相同的类型。SVG可以嵌入字体，但尚不被广泛支持（没有插件）。

我认为我见过的最可移植的解决方案是使用JavaScript函数用您选择的字体将标题等替换为在服务器上生成并缓存的图像-这样，您只需更新文本即可，而不必在Photoshop中的东西。

— 佐比尔
source
使用JavaScript不必这样做。我知道当今很多人都喜欢使用JavaScript来做很多事情，但是在这里，标准CSS技术可能更合适。参见sitepoint.com/article/header-images-css-xhtml
— hangy
很抱歉，如果您感到困惑，该技术不是指替换图像的方法，就像您所说的那样，可以是CSS。这是关于在服务器上即时生成以特定字体/样式表示给定字符串的图形的方法-无需手动创建这些图形。
— zobier
4

如果使用ASP.NET，生成基于图像的字体真的很容易，而无需实际使用以下方法在服务器上安装（如添加到已安装的字体库中）字体：

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

然后以该字体绘制到上Graphics。

— tl
source
1
好吧，是的...而且您的用户可能会忘记复制和粘贴。在旧的浏览器中也可以缩放。我什至不谈论带宽问题！
— e-satis
2
是的，好的，这个问题表明它将用于内容文本？不，不是，这是一个普遍的问题，这是一个普遍的答案。文字，标题等小片段不会占用大量带宽。嘘，抓紧！
— mattlant
3

我做了一些研究，并研究了“ 动态文本替换”（发布于2004-06-15）。

该技术使用图像，但看起来是“免提”的。您编写文本，然后让一些自动化脚本在页面上为您即时进行自动查找和替换。

它有一些局限性，但它可能是我所见过的所有其他选择中较容易的选择之一（并且与浏览器更兼容）。

— 肯特·弗雷德里克（Kent Fredric）
source
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;
 }
— 威尔夫
source
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）
source
一个简单的好选择。而且您肯定拥有使用它的权利。参见developers.google.com/fonts/docs/getting_started
— 蒂姆·埃里克森
2

Typeface.js JavaScript方式：

使用typeface.js，您可以在网页中嵌入自定义字体，从而不必将文本呈现为图像

您可以使用typeface.js并以纯HTML和CSS编写内容，就像访问者已在本地安装字体一样，而不必创建图像或仅使用Flash来以所需字体显示网站的图形文本。

http://typeface.neocracy.org/

— 巴卡
source
2

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

为此，我使用诸如Fontsquirrel之类的字体生成器，它提供了所有字体格式及其@ font-face CSS，您只需要将其拖放到CSS文件中即可。

— 萨德兹
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.