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

例如,我在一个婚礼网站上工作,我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像,这可能吗?


当前回答

或者你可以试试sIFR。我知道它使用Flash,但只有在可用的情况下。如果Flash不可用,它将以原始(CSS)字体显示原始文本。

其他回答

这可以通过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-Fonts (TTF), Web Open Font Format (WOFF)或Embedded Opentype (EOT),所有常规浏览器都支持它。

Safari和Internet Explorer都支持CSS @font-face规则,但是它们支持两种不同的嵌入式字体类型。Firefox计划在不久的将来支持与Apple相同的类型。SVG可以嵌入字体,但还没有得到广泛支持(没有插件)。

我认为我所见过的最可移植的解决方案是使用JavaScript函数将标题等替换为生成的图像,并使用你所选择的字体缓存在服务器上——这样你就可以简单地更新文本,而不必在Photoshop中进行处理。

方法是使用@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开发者网络

@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");
}

也可以使用WOFF字体-例如这里

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }