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

发布于 2025-01-02 11:28:51 字数 149 浏览 0 评论 0原文

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

I know of cufon and one other similar. But what is the best way to use a non web standard font as a font on your site? I have a client who has 2 distinct fonts they want to use as the text through out the site being created but they are not standard fonts for the web. I could do them as images maybe, if they were just navigation use. But they want the whole body up and down to be using these fonts through out.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

2025-01-09 11:28:51

在使用 cufon 经历了一些美好的时光和一些糟糕的时光之后,我决定使用 @font-face 并享受它。

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

after some good, some bad times with cufon, i settled using @font-face and enjoy it.

if your font license allows it, http://www.fontsquirrel.com/fontface/generator is a nice generator for all the needed files + some basic css.

秉烛思 2025-01-09 11:28:51

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

如果您只是想要更广泛的字体选择,那么没有比 Google 字体更好的了 - http://www.google.com/webfonts google.com/webfonts。该服务可让您轻松地将字体添加到您的网站。

I think all other posts has said the same thing. I find @font-face the best tool for alternative fonts. If you have you own font you can use the font-squirel generator as mentioned by Roman.

But

If you just what a wider choose of fonts you can't do any better than Google fonts - http://www.google.com/webfonts. This service easily let you add fonts to your site.

攒一口袋星星 2025-01-09 11:28:51

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

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

这当然是在样式表中。

This is an example of how I use a font on my website.

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

This of course is in the stylesheet.

阳光①夏 2025-01-09 11:28:51

这里有几个问题需要处理。

嵌入

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

类似以下内容应该有效:

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

法律

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

There are a few issues to deal with here.

Embedding

You can embed font files (OpenType, Web Open Font Format [WOFF], etc.) using CSS's @font-face. Different web browsers support fonts in different formats so you will need to use multiple formats to catch all the variations.

Something like the following should work:

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

Legal

You ought to check the font licenses to make sure they can be used on the web. The kind of embedding shown above is broadly considered a limited form of distribution, but many font licenses are quite liberal these days.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文