如何添加一些非标准的字体到网站？
有没有办法在网站上添加一些自定义字体，而不使用图像， Flash或其他graphics？
例如，我正在一些婚礼网站上工作，我正在为这个主题find很多不错的字体，但我找不到在服务器上添加该字体的正确方法，以及如何在CSS中包含该字体进入HTML？ 这可能没有graphics？
这可以通过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 Open字体格式（WOFF），则支持所有常规浏览器 。
您可以通过Google Web字体添加一些字体 。
从技术上讲，字体托pipe在谷歌，你把它们链接到HTML标头。 然后，你可以在@font-face 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; }
该解决scheme似乎相当可靠（甚至是Smashing杂志将其用于文章标题 ）。 但是，到目前为止，在Google字体目录中没有太多可用的字体 。
要走的路是使用@ font-face CSS声明，它允许作者指定联机字体在其网页上显示文本。 通过允许作者提供他们自己的字体，@ font-face消除了依靠用户在计算机上安装的有限数量的字体的需要。
看看下面的表格：
正如你所看到的，你需要知道的几种格式主要是由于跨浏览器的兼容性。 移动设备中的场景没有多大区别。
解决scheme：
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; }
参考文献和进一步阅读
这主要是你需要知道实现这个function。 如果你想研究更多的主题，我会鼓励看看下面的资源。 我在这里放置的大部分内容摘自以下内容
- 使用字体面 （非常推荐）
- Bulletproof @ font-face语法
- 我可以使用@ font-face网页字体吗？
- 如何存档跨浏览器@ font-face支持
- @ Mozilla开发者networking的@ font-face
如果使用非标准字体，则表示标准格式的自定义字体，以下是我如何操作的方法，以及适用于迄今为止检查过的所有浏览器：
@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字体。 一些在线可用的工具可以进行转换。
但是，如果你想附加非标准格式（位图等）的字体，我不能帮你。
文章中的文字字体：使networking字体工作说，它可以与所有三个主要的浏览器。
这是我工作的一个示例： http : //brendanjerwin.com/test_font.html
更多的讨论是在embedded字体 。
我发现在网站上使用非标准字体最简单的方法是使用sIFR
它涉及使用包含字体的Flash对象，但如果未安装Flash，则会降级到标准文本/字体。
样式在CSS中设置，JavaScript为您的文本设置Flashreplace。
编辑:(我仍然build议使用非标准字体的图像，因为sIFR增加了一个项目的时间，可能需要维护）。
Typeface.js和Cufon是另外两个有趣的选项。 它们是以JSON格式（通过网站上的TrueType或OpenType格式）转换特殊字体数据的JavaScript组件，它通过除Internet Explorer和Internet Explorer中的VML以外的所有新浏览器中的新<canvas>元素。
两者的主要问题（从现在开始）是select文本不起作用，或者至less工作起来很笨拙。
不过，这是非常好的头条新闻。 正文…我不知道。
而且这是惊人的快。
或者你可以尝试sIFR 。 我知道它使用Flash，但只有可用。 如果Flash不可用，则以原始（CSS）字体显示原始文本。
有没有办法在网站上添加一些自定义字体，而不使用… Flash？
当然，使用Silverlight 。
W3C为此推荐的技术被称为“embedded”，这里有三篇文章： embedded字体 。 在我有限的实验中，我发现这个过程容易出错，并且在多浏览器环境下的function有限。
Safari和Internet Explorer都支持CSS @ font-face规则，但是它们支持两种不同的embedded字体types。 Firefox计划很快支持与苹果一样的types。 SVG可以embedded字体，但还没有被广泛支持（没有插件）。
我认为我见过的最便携的解决scheme是使用JavaScript函数来replace标题等，使用您select的字体在服务器上生成和caching图像 – 这样，您只需更新文本，而不必在Photoshop中的东西。
如果使用ASP.NET，那么生成基于图像的字体非常容易，而无需实际上通过使用以下命令来安装（如添加到已安装的字体库）服务器上的字体：
PrivateFontCollection pfont = new PrivateFontCollection(); pfont.AddFontFile(filename); FontFamily ff = pfont.Families[0];
然后用该字体绘制到一个Graphics 。
它看起来像只能在Internet Explorer中工作，但快速谷歌search“HTMLembedded字体”产生http://www.spoono.com/html/tutorials/tutorial.php?id=19
如果你想保持平台不可知（你应该！），你将不得不使用图像，否则只是使用标准的字体。
我做了一些研究，挖掘了dynamic文本replace （2004-06-15发布）。
这种技术使用图像，但它似乎是“免提”。 你写你的文本，你让几个自动化的脚本在网页上自动查找和replace你的dynamic。
它有一些限制，但它可能是比我见过的其他更容易的select（和更多的浏览器兼容）。
Typeface.js JavaScript方式：
使用typeface.js，您可以在网页中embedded自定义字体，因此您不必将文本呈现给图像
您可以使用typeface.js并使用普通的HTML和CSS编写，就像访问者在本地安装字体一样，您不需要创build图像或使用Flash来显示网站的graphics文本。
Monotype最近发布了很多他们的字体以及在您的网页上使用它们的新系统： http : //www.webfonts.fonts.com/
请参阅文章50有用的devise工具美丽的网页排版替代方法。
我只用过Cufon 。 我发现它的可靠性和使用非常简单，所以我一直坚持下去。
也可以使用WOFF字体 – 这里的例子
@font-face { font-family: 'Plakat Fraktur'; src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff'); font-weight: bold; font-style: normal; }
如果你有一个你的字体文件，那么你需要为其他浏览器添加更多的字体格式。
为此我使用字体生成器，如Fontsquirrel它提供了所有的字体格式和它的@ font-face CSS，你只需要拖放它到你的CSS文件。
在这种情况下，恐怕graphics是你唯一的select。
只要简单地提供这样的实际字体的链接，你会很好去
<!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>
