有没有一种方法可以在网站上添加一些自定义字体，而不使用图像，Flash或其他图形?
例如，我在一个婚礼网站上工作，我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像，这可能吗?
当前回答
方法是使用@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开发者网络
其他回答
JavaScript方式:
使用字体.js你可以嵌入自定义 你的网页字体，这样你就不会 必须将文本渲染为图像 而不是创造图像或使用 Flash只是为了显示你的网站的图形 文本用你想要的字体，你可以使用 用纯HTML编写 和CSS，就像你的访问者一样 字体在本地安装。
http://typeface.neocracy.org/
@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");
}
请参阅文章《美丽网页排版的50个有用的设计工具》以获得其他方法。
我只用过Cufon。我发现它很可靠，很容易使用，所以我一直用它。
Safari和Internet Explorer都支持CSS @font-face规则，但是它们支持两种不同的嵌入式字体类型。Firefox计划在不久的将来支持与Apple相同的类型。SVG可以嵌入字体，但还没有得到广泛支持(没有插件)。
我认为我所见过的最可移植的解决方案是使用JavaScript函数将标题等替换为生成的图像，并使用你所选择的字体缓存在服务器上——这样你就可以简单地更新文本，而不必在Photoshop中进行处理。
我发现在网站上使用非标准字体最简单的方法是使用sIFR
它确实涉及到包含字体的Flash对象的使用，但如果没有安装Flash，它会很好地降级为标准文本/字体。
样式在CSS中设置，JavaScript为文本设置Flash替换。
编辑:(我仍然建议使用非标准字体的图像，因为sIFR会增加项目的时间，并且可能需要维护)。
