有没有一种方法可以在网站上添加一些自定义字体，而不使用图像，Flash或其他图形?
例如，我在一个婚礼网站上工作，我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像，这可能吗?
当前回答
W3C为此推荐的技术称为“嵌入”，这里有三篇文章对其进行了详细描述:嵌入字体。在我有限的实验中，我发现这个过程容易出错，而且在多浏览器环境中使用它的成功程度有限。
其他回答
如果您使用ASP。NET，它很容易生成基于图像的字体，而不需要在服务器上安装(如添加到已安装的字体库)字体，通过使用:
PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];
然后用这种字体在图形上绘图。
如果您有一个字体文件，那么您将需要为其他浏览器添加该字体的更多格式。
出于这个目的，我使用Fontsquirrel这样的字体生成器，它提供了所有的字体格式和它的@font-face CSS，你只需要将它拖放到你的CSS文件中。
也可以使用WOFF字体-例如这里
@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
}
方法是使用@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;
}
参考文献和进一步阅读:
这就是实现此特性需要了解的主要内容。如果你想进一步研究这个主题，我建议你看看下面的资源。我在这里写的大部分内容都是从下面摘录出来的
使用字体面(非常推荐) 防弹@字体-面语法 我可以使用@font-face网页字体吗? 如何存档跨浏览器@字体面支持 @font-face在CSS Mozilla开发者网络
我做了一些研究，找到了动态文本替换(发布于2004-06-15)。
这项技术使用图像，但它似乎是“解放双手”。您编写文本，然后让一些自动脚本在页面上自动执行查找和替换操作。
它有一些限制，但它可能是我所见过的最简单的选择之一(而且更兼容浏览器)。
