网站上的HTML CSS JavaScript字体,不使用图像


HTML CSS JavaScript Font on Site without use of Image

我知道cufon和另一个类似的。但是,在您的网站上使用非网络标准字体的最佳方式是什么?我有一个客户,他有两种不同的字体,他们想在创建的网站中用作文本,但它们不是网络的标准字体。如果只是导航的话,我也许可以把它们做成图像。但他们希望全身上下都能使用这些字体。

在与cufon相处了一段好时光、一段坏时光后,我决定使用@font face并享受它。

如果您的字体许可证允许,http://www.fontsquirrel.com/fontface/generator是一个很好的生成器,用于所有需要的文件+一些基本的css。

我想所有其他帖子都说了同样的话。我发现@font face是替代字体的最佳工具。如果你有自己的字体,你可以使用Roman提到的字体蠕动生成器。

但是

如果你只是选择了更广泛的字体,你就不能比谷歌字体做得更好了http://www.google.com/webfonts.通过此服务,您可以轻松地向网站添加字体。

这是我如何在网站上使用字体的示例。

@include url('http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css');
@font-face { font-family: VAGLT; src: url('VAGLT.TTF'); } 
@font-face { font-family: VAGBT; font-weight: bold; src: url('VAGBT.TTF'); }
.boldtitle{
    font-family: VAGBT, sans-serif;
    font-weight: bold;
}

这当然在样式表中。

这里有一些问题需要处理。

嵌入

您可以使用CSS的@font-face嵌入字体文件(OpenType、Web Open font Format[WOFF]等)。不同的web浏览器支持不同格式的字体,因此您需要使用多种格式来捕捉所有变体。

以下内容应该有效:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf')  format('truetype'),
    url('myfont-webfont.svg#svgFontName') format('svg');
}
body {
    font-family: MyFontFamily, /* etc. */ sans-serif;
}

法律

你应该检查字体许可证,以确保它们可以在网络上使用。上面显示的嵌入被广泛认为是一种有限的分发形式,但现在许多字体许可证都相当自由。