网络上的字体

发布于 2024-07-04 07:36:07 字数 418 浏览 5 评论 0原文

Web 开发人员可用的字体集合非常有限。 我记得很久以前读过有关 TrueDoc 的文章,它是一种随网站一起提供字体的方式 - 但它似乎已经销声匿迹了。 有人用过这个或者类似的吗? 有足够多的浏览器支持吗? 我是否缺少一个好的解决方案?

请注意,负责任的 Web 开发人员不会使用仅在 Windows 上可用的字体(尤其是仅在 Vista 上可用的字体),也不会使用至少不受支持的技术。大多数浏览器。


更新:正如一些人所指出的,为没有您使用的特定字体的人提供后备字体列表并没有什么问题。 事实上,我确实总是这样做,并不是说这是错误的。

虽然我的问题措辞很糟糕,但我的意思是设计师不应该对客户可用的东西做出太多假设。 您应该规划所有用户将如何查看您的网站,而不仅仅是使用您自己喜欢的设置的用户。

The collection of fonts available to a web developer is depressingly limited. I remember reading long ago about TrueDoc, as a way of shipping fonts alongside a website - but it seems to have languished. Has anybody used this, or something similar? Is it supported by enough browsers? Am I missing a good solution?

Note that a responsible web developer does not use fonts that are only available on Windows (and especially ones that are only available on Vista), nor do they use a technology that isn't supported by at least the majority of browsers.


Update: As several people have pointed out, there's nothing wrong with providing a list of fallback fonts for people who don't have the specific font you use. I do in fact always do this, and didn't mean to suggest that this was wrong.

While my question was badly phrased, what I meant was that a designer should not make too many assumptions about what the client will have available. You should plan for how all users will see your site, not just for people using your own preferred setup.

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

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

发布评论

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

评论(10

知足的幸福 2024-07-11 07:36:07

CSS2 提供:

@font-face {
    font-family: Garamond;
    src: url(garamond.eot), url(garamond.pfr);
}

CSS2 offers:

@font-face {
    font-family: Garamond;
    src: url(garamond.eot), url(garamond.pfr);
}
又怨 2024-07-11 07:36:07

请注意,负责任的 Web 开发人员不会使用仅在 Windows 上可用的字体(尤其是仅在 Vista 上可用的字体),也不会使用至少大多数浏览器不支持的技术。

我认为这根本没有抓住重点。 如果你这样做也没关系; 每个人都会得到一些他们可以轻松阅读的合理内容,并且需要的人可以将字体更改为他们想要的任何内容,因为它只是文本,并且所有主要浏览器都允许您自定义您看到的字体,无论网站设计者的偏好如何。

在 CSS 中建议某些用户没有的字体并没有什么问题; 他们只是看到了与你不同的东西。 不同不破。 他们甚至不会想知道为什么您使用默认字体,因为他们不知道其他人会看到任何不同的东西。

这就是字体集的全部要点:

Verdana, Arial, Helvetica, sans-serif

这是一个很好的实践,因为它承认人们会看到不同的东西。

这也是一个很好的做法:

Gill Sans, Verdana, Arial, Helvetica, sans-serif

所以大多数人都没有吉尔——谁在乎呢? 无论如何,他们都会得到一个非常好的网站。

这也很好,但有点奇怪和懒惰:

Gill Sans

不负责任的网页设计正在做一些事情,比如将文本设置为图像而不使用替代文本,不在字体集中使用有趣的字体。

Note that a responsible web developer does not use fonts that are only available on Windows (and especially ones that are only available on Vista), nor do they use a technology that isn't supported by at least the majority of browsers.

I think this is rather missing the point. It wouldn't matter if you did; everyone would get something sensible that they could read easily, and the ones who need to can change the font to whatever they want anyway because it's just text and all major browsers let you customise the font you see regardless of the preferences of the site designer.

There is nothing broken about suggesting fonts in your CSS that some users don't have; they just see something different from you. Different is not broken. They won't even wonder why you're using default fonts because they won't know that other people see anything different.

This is the whole point of font sets:

Verdana, Arial, Helvetica, sans-serif

It's good practice precisely because it acknowledges that people will see different things.

This is good practice too:

Gill Sans, Verdana, Arial, Helvetica, sans-serif

So most people don't have Gill – who cares? They get a perfectly good site regardless.

And this would be fine too, but a bit weird and lazy:

Gill Sans

Irresponsible web design is doing things like setting text as images without using alt text, not using interesting fonts in font sets.

满栀 2024-07-11 07:36:07

Safari 以及 Firefox 3 在 CSS 中支持 @font-face,这让您可以使用自定义字体。 不过,您需要拥有适当的许可证才能分发字体文件。 这些文章更详细地解释了它:

Safari, and to a lesser extent, Firefox 3 have support for @font-face in CSS, which lets you use custom fonts. You need to have the appropriate licence to distribute the font files though. These articles explain it in more detail:

雨后彩虹 2024-07-11 07:36:07

这是一个及时的话题; 我们改用 Arial,因为 Calibri 与所有其他后备字体相比太小了! 切换到(搞笑)Arial 让我非常痛苦,因为它是 Helvetica 的蹩脚副本:

http:// www.ms-studio.com/articles.html

大小调整困难(如果您使用“c”字体作为标准,则太大;如果您使用普通字体,则太小)详细描述如下:

< a href="http://neosmart.net/blog/2006/css-vistas-new-fonts/" rel="noreferrer">http://neosmart.net/blog/2006/css-vistas-new-fonts /

我会非常怀念 Calibri 漂亮的手工调整 RGB 混叠,但如果不要求安装 Calibri,就不可能为大多数用户提供良好的体验。 它相当常见,因为它随 Office 2007 (Win/Mac) 一起提供,当然还有 Vista。但它远非通用,因此为全球网络受众严重依赖它有点不负责任。

This is a timely thread; we switched to Arial because Calibri is WAY small compared to all the other fallback fonts! It pained me greatly to switch to (gag) Arial because it's a crap copy of Helvetica:

http://www.ms-studio.com/articles.html

The sizing difficulties (too big if you go with a "c" font as your standard; too small if you go with something normal) are described in detail here:

http://neosmart.net/blog/2006/css-vistas-new-fonts/

I will miss Calibri's beautiful hand-tuned RGB aliasing a lot, but it was just impossible to deliver a good experience for most users without demanding Calibri be installed. It's reasonably common, as it comes with Office 2007 (Win/Mac) and of course Vista.. but it's far from universal, so it's a little irresponsible to rely heavily on it for a global web audience.

治碍 2024-07-11 07:36:07

我想任何通过网页发送字体的方法都会带来某种安全风险。 我听说过一些方法,在客户端没有所需字体的情况下,可以用显示的图像或某种闪存动态替换文本。 我现在能找到的唯一一个这样的地方是 AListApart 但它可能已经是多余的了。
上述方法还需要 CSS、图像和 JavaScript 才能工作,并且跨浏览器实现可能会很痛苦。

I'd imagine any method of sending fonts with a web page would pose some sort of security risk. I have heard of methods where, in the case that the client doesn't have the required font, the text can be dynamically replaced with an image of or some sort a flash displayed. The only one like this I can find now is at AListApart but it may already be redundant.
Said method would also require css, images and javascript to work and could be painful to implement across browsers.

你与清晨阳光 2024-07-11 07:36:07

IE 支持@font-face(它最初是他们在 MS Word 中的专有技术)。 这是来自IE 团队大约一个月前才讨论过这个问题

IE supports @font-face (it started out as their proprietary technology in MS Word). Here's a blog post from the IE team about it just about a month ago.

非要怀念 2024-07-11 07:36:07

请注意,负责任的 Web 开发人员不会使用仅在 Windows 上可用的字体(尤其是仅在 Vista 上可用的字体),也不会使用至少大多数浏览器不支持的技术。

嗯...您可以,只要您知道它将如何在非 Vista/非 Windows 操作系统上呈现。

否则:是的,CSS2 中的 @font-face 是最好的标准替代方案,即使它没有得到广泛支持。

Note that a responsible web developer does not use fonts that are only available on Windows (and especially ones that are only available on Vista), nor do they use a technology that isn't supported by at least the majority of browsers.

Well… You can, as long as you know how it will render on non-Vista/non-Windows OS.

Otherwise: yep, @font-face in CSS2 is the best standard alternative, even if it is not widely supported.

我是男神闪亮亮 2024-07-11 07:36:07

请注意,负责任的 Web 开发人员不会使用仅用于
在 Windows 上可用(尤其是那些仅在
Vista),也不使用至少不受支持的技术
大多数浏览器。

如果您能够优雅地降级为广泛使用的字体,那么使用 Windows/Vista 特定字体并没有什么错误或不正确。 例如:

font-family: Calibri, Tahoma, Helvetica, Sans-Serif;

事实上这就是重点!

Note that a responsible web developer does not use fonts that are only
available on Windows (and especially ones that are only available on
Vista), nor do they use a technology that isn't supported by at least
the majority of browsers.

There's nothing wrong or incorrect about using Windows/Vista-specific fonts provided you gracefully degrade to a widely-available font. For example:

font-family: Calibri, Tahoma, Helvetica, Sans-Serif;

In fact that's the whole point!

宁愿没拥抱 2024-07-11 07:36:07

您可以使用新的 @font-face 来做到这一点 声明 在 CSS3 中可用。 它也对 CSS3 功能(即自 IE4 以来)有很好的支持。

一般语法是:

@font-face {
    src: url('path to your font') format('woff|ttf|svg|eot|…');
    font-family: the name to use;
    font-weight: an optional weight;
    font-style: an optional style;
}

还有可用的生成器,可以将字体转换为多种格式并创建适当的CSS。

如今,我建议仅提供 WOFF 文件; 它很方便,易于创建

另外,请确保引用格式名称(例如 format('woff')); 否则它将无法在 Firefox 上运行。

You can do that with the new @font-face declaration available in CSS3. It has very good support for a CSS3 feature (i.e. since IE4), too.

The general syntax is:

@font-face {
    src: url('path to your font') format('woff|ttf|svg|eot|…');
    font-family: the name to use;
    font-weight: an optional weight;
    font-style: an optional style;
}

There's also a generator available that converts the font to multiple formats and creates the appropriate CSS.

Nowadays, I would recommend providing only a WOFF file; it’s convenient, easy to create.

Also, make sure to quote the name of the format (e.g. format('woff')); it won’t work on Firefox otherwise.

澜川若宁 2024-07-11 07:36:07

您当然可以使用SIFR

这在不支持它的浏览器中会正常降级并且可以访问。

它不太适合在大量文本上使用,但对于标题和突出显示文本来说它是完美的。

当然,这是针对当前浏览器和网络的固有限制的解决方案,但大多数网络技术和技术什么时候不是这样的。

You can of course use SIFR.

This degrades gracefully in browsers that do not support it and is accessible.

It's not really suitable for using on loads of text but for headings and highlight text it's perfect.

Of course this is a work around to an intrinsic limitation of browsers and the web at this time, but when was this not the case for the majority of web technologies and techniques.

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