有没有办法在网站上添加一些自定义字体而不使用图像，Flash或其他一些图形？
例如，我正在一些婚礼网站上工作，我找到了很多很好的字体，但是我找不到在服务器上添加该字体的正确方法，以及如何在CSS中包含该字体进入HTML？这可能没有图形吗？
要做的就是使用@ font-face CSS声明，该声明允许作者指定在线字体以在其网页上显示文本 . 通过允许作者提供自己的字体，@ font-face无需依赖用户在其计算机上安装的有限数量的字体 .
看看下表：
如您所见，主要由于跨浏览器兼容性，您需要了解几种格式 . 移动设备中的场景没有太大差异 .
1 - Full browser compatibility
这是现在可能获得最深层支持的方法：
@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 - Most of the browser
事情是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 - Only the latest browsers
或者甚至只是WOFF .然后你像这样使用它：
body { font-family: 'MyWebFont', Fallback, sans-serif; }
这主要是您需要了解的有关实现此功能的内容 . 如果您想更多地研究这个主题，我将鼓励您查看以下资源 . 我在这里放的大部分内容都来自以下内容
Using Font Face（非常推荐）
Bulletproof @font-face syntax
Can i use @font-face web fonts ?
How to archive Cross-Browser @font-face support
@font-face at the CSS Mozilla Developer Network
有没有办法在网站上添加一些自定义字体而不使用... Flash？
当然，请使用Silverlight .
我发现在网站上使用非标准字体的最简单方法是使用 sIFR
它确实涉及使用包含字体的Flash对象，但如果未安装Flash，它会很好地降级为标准文本/字体 .
样式在CSS中设置，JavaScript为您的文本设置Flash替换 .
Edit: (I still recommend using images for non-standard fonts as sIFR adds time to a project and can require maintenance).
如果使用非标准字体，则表示标准格式的自定义字体，这是我的工作方式，它适用于我迄今为止检查过的所有浏览器：
@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字体 . 在线提供的一些工具可以进行转换 .
但是如果你想以非标准格式（位图等）附加字体，我无法帮助你 .
Safari和Internet Explorer都支持CSS @ font-face规则，但它们支持两种不同的嵌入字体类型 . Firefox计划很快支持与Apple相同的类型 . SVG可以嵌入字体，但尚未广泛支持（没有插件） .
我认为我见过的最便携的解决方案是使用JavaScript函数替换 Headers 等，使用您选择的字体生成并缓存在服务器上的图像 - 这样您只需更新文本而不必在Photoshop中的东西 .
Monotype最近发布了很多字体以及在您的网页上使用它们的新系统：http://www.webfonts.fonts.com/
有关替代方法，请参阅文章50 Useful Design Tools For Beautiful Web Typography .
我只使用了Cufon . 我发现它可靠且易于使用，所以我坚持使用它 .
文章Font-face in IE: Making Web Fonts Work表示它适用于所有三种主流浏览器 .
这是我工作的样本：http://brendanjerwin.com/test_font.html
更多讨论在Embedding Fonts中 .
也可以使用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; }
或者你可以试试sIFR . 我知道它使用Flash，但仅限于可用 . 如果Flash不可用，它将以原始（CSS）字体显示原始文本 .
看起来它只适用于Internet Explorer，但快速谷歌搜索"html embed fonts"会产生http://www.spoono.com/html/tutorials/tutorial.php?id=19
如果你想保持与平台无关（你应该！）你将不得不使用图像，或者只是使用标准字体 .
Typeface.js JavaScript Way:
使用typeface.js，您可以在网页中嵌入自定义字体，这样您就不必为图像渲染文本而不是创建图像或使用Flash只是为了以您想要的字体显示网站的图形文本，您可以使用字体 . js并用纯HTML和CSS编写，就像访问者在本地安装了字体一样 .
http://typeface.neocracy.org/
您可以通过Google Web Fonts添加一些字体 .
从技术上讲，字体是在Google上托管的，您可以在HTML Headers 中链接它们 . 然后，您可以在CSS中使用@font-face（read about it）自由使用它们 .
例如：
在<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中的字体数量并不多 .
如果您使用ASP.NET，则生成基于图像的字体非常容易，而无需实际使用以下命令安装（如添加到已安装的字体库中）字体：
PrivateFontCollection pfont = new PrivateFontCollection(); pfont.AddFontFile(filename); FontFamily ff = pfont.Families[0];
然后使用该字体绘制到 Graphics 上 .
Graphics
在这种情况下，我担心图形是你唯一的选择 .
只需简单地提供链接到这样的实际字体，你会很高兴
<!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>
W3C推荐的技术称为"embedding"，这里有三篇文章很好地描述了这些技术：Embedding Fonts . 在我有限的实验中，我发现这个过程容易出错，并且在使其在多浏览器环境中运行方面取得了有限的成功 .
我做了一些研究并挖出了Dynamic Text Replacement（2004-06-15发表） .
这种技术使用图像，但它似乎是“免提” . 您编写了自己的文本，并且让一些自动化脚本在页面上为您实时自动查找和替换 .
它有一些限制，但它可能是比我见过的所有其他更容易的选择（和更多的浏览器兼容） .
这可以通过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），则为supported for all of the regular browsers .
如果您有自己的字体文件，则需要为其他浏览器添加该字体的更多格式 .
为此，我使用字体生成器，如Fontsquirrel，它提供了所有的字体格式及其@ font-face CSS，您只需要将其拖放到CSS文件中即可 .
Typeface.js和Cufon是另外两个有趣的选项 . 它们是JavaScript组件，可以通过除Internet Explorer之外的所有较新浏览器中的新<canvas>元素以及Internet Explorer中的VML呈现JSON格式的特殊字体数据（可以在其网站上转换为TrueType或OpenType格式） .
两者（截至目前）的主要问题是选择文本不起作用或至少非常笨拙地起作用 .
不过，这对于头条新闻来说还是非常不错的 . 正文......我不知道 .
而且速度惊人的快 .
21 回答
要做的就是使用@ font-face CSS声明，该声明允许作者指定在线字体以在其网页上显示文本 . 通过允许作者提供自己的字体，@ font-face无需依赖用户在其计算机上安装的有限数量的字体 .
看看下表：
如您所见，主要由于跨浏览器兼容性，您需要了解几种格式 . 移动设备中的场景没有太大差异 .
解决方案：
1 - Full browser compatibility
这是现在可能获得最深层支持的方法：
2 - Most of the browser
事情是shifting heavily toward WOFF，所以你可能会逃脱：
3 - Only the latest browsers
或者甚至只是WOFF .
然后你像这样使用它：
参考文献和进一步阅读：
这主要是您需要了解的有关实现此功能的内容 . 如果您想更多地研究这个主题，我将鼓励您查看以下资源 . 我在这里放的大部分内容都来自以下内容
Using Font Face（非常推荐）
Bulletproof @font-face syntax
Can i use @font-face web fonts ?
How to archive Cross-Browser @font-face support
@font-face at the CSS Mozilla Developer Network
当然，请使用Silverlight .
我发现在网站上使用非标准字体的最简单方法是使用 sIFR
它确实涉及使用包含字体的Flash对象，但如果未安装Flash，它会很好地降级为标准文本/字体 .
样式在CSS中设置，JavaScript为您的文本设置Flash替换 .
Edit: (I still recommend using images for non-standard fonts as sIFR adds time to a project and can require maintenance).
如果使用非标准字体，则表示标准格式的自定义字体，这是我的工作方式，它适用于我迄今为止检查过的所有浏览器：
所以你只需要ttf和eot字体 . 在线提供的一些工具可以进行转换 .
但是如果你想以非标准格式（位图等）附加字体，我无法帮助你 .
Safari和Internet Explorer都支持CSS @ font-face规则，但它们支持两种不同的嵌入字体类型 . Firefox计划很快支持与Apple相同的类型 . SVG可以嵌入字体，但尚未广泛支持（没有插件） .
我认为我见过的最便携的解决方案是使用JavaScript函数替换 Headers 等，使用您选择的字体生成并缓存在服务器上的图像 - 这样您只需更新文本而不必在Photoshop中的东西 .
Monotype最近发布了很多字体以及在您的网页上使用它们的新系统：http://www.webfonts.fonts.com/
有关替代方法，请参阅文章50 Useful Design Tools For Beautiful Web Typography .
我只使用了Cufon . 我发现它可靠且易于使用，所以我坚持使用它 .
文章Font-face in IE: Making Web Fonts Work表示它适用于所有三种主流浏览器 .
这是我工作的样本：http://brendanjerwin.com/test_font.html
更多讨论在Embedding Fonts中 .
也可以使用WOFF字体 - 例如here
或者你可以试试sIFR . 我知道它使用Flash，但仅限于可用 . 如果Flash不可用，它将以原始（CSS）字体显示原始文本 .
看起来它只适用于Internet Explorer，但快速谷歌搜索"html embed fonts"会产生http://www.spoono.com/html/tutorials/tutorial.php?id=19
如果你想保持与平台无关（你应该！）你将不得不使用图像，或者只是使用标准字体 .
Typeface.js JavaScript Way:
http://typeface.neocracy.org/
您可以通过Google Web Fonts添加一些字体 .
从技术上讲，字体是在Google上托管的，您可以在HTML Headers 中链接它们 . 然后，您可以在CSS中使用@font-face（read about it）自由使用它们 .
例如：
在<head>部分：
然后在CSS中：
解决方案似乎非常可靠（甚至Smashing Magazine uses it for an article title.） . 但是，到目前为止，Google Font Directory中的字体数量并不多 .
如果您使用ASP.NET，则生成基于图像的字体非常容易，而无需实际使用以下命令安装（如添加到已安装的字体库中）字体：
然后使用该字体绘制到
Graphics上 .在这种情况下，我担心图形是你唯一的选择 .
只需简单地提供链接到这样的实际字体，你会很高兴
W3C推荐的技术称为"embedding"，这里有三篇文章很好地描述了这些技术：Embedding Fonts . 在我有限的实验中，我发现这个过程容易出错，并且在使其在多浏览器环境中运行方面取得了有限的成功 .
我做了一些研究并挖出了Dynamic Text Replacement（2004-06-15发表） .
这种技术使用图像，但它似乎是“免提” . 您编写了自己的文本，并且让一些自动化脚本在页面上为您实时自动查找和替换 .
它有一些限制，但它可能是比我见过的所有其他更容易的选择（和更多的浏览器兼容） .
这可以通过CSS完成：
如果您使用TrueType字体（TTF）或Web开放字体格式（WOFF），则为supported for all of the regular browsers .
如果您有自己的字体文件，则需要为其他浏览器添加该字体的更多格式 .
为此，我使用字体生成器，如Fontsquirrel，它提供了所有的字体格式及其@ font-face CSS，您只需要将其拖放到CSS文件中即可 .
Typeface.js和Cufon是另外两个有趣的选项 . 它们是JavaScript组件，可以通过除Internet Explorer之外的所有较新浏览器中的新<canvas>元素以及Internet Explorer中的VML呈现JSON格式的特殊字体数据（可以在其网站上转换为TrueType或OpenType格式） .
两者（截至目前）的主要问题是选择文本不起作用或至少非常笨拙地起作用 .
不过，这对于头条新闻来说还是非常不错的 . 正文......我不知道 .
而且速度惊人的快 .