如何在网站中使用我们自己的字体,并与所有用户兼容?
我需要在我的网页中使用不同的 hi-style 字体。但我担心,如果用户没有这样的字体,那么它们将以默认字体显示。如何使用不同的新字体来兼容所有用户?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
我需要在我的网页中使用不同的 hi-style 字体。但我担心,如果用户没有这样的字体,那么它们将以默认字体显示。如何使用不同的新字体来兼容所有用户?
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论(10)
考虑使用每个人都使用的普通字体作为正文,即大部分内容。有相当多的可供选择。对于标题,请使用绘图包(例如,MS Paint、Photoshop)将标题格式设置为使用您喜欢的字体的图像。如果你想为你的正文添加更漂亮的字体,你总是可以在你的 CSS 中使用类似的东西:
记住它会首先尝试使用你更漂亮的字体,然后回退到更普通的选择列表,直到匹配被发现。请记住,从可用性的角度来看,大多数人更喜欢使用像 Helvetica 或 Times Roman 这样的简单字体作为正文(考虑 Google、Yahoo!、Stack Overflow...)。当然,用位图图像为头条新闻增添趣味是网络生活的乐趣之一。
Consider using a normal font that everybody has for body-text, the bulk of your content. There are quite a few to choose from. For headlines, use a drawing package (e.g., MS Paint, Photoshop) to format headlines as images using your preferred font. If you want to incorporate a fancier font for your body text, you can always resort to something like this in your CSS:
Remembering that it will try to use your fancier font first, then fall back through the list of more mundane choices until a match is found. Bear in mind that from a usability standpoint, most people prefer a simple font like Helvetica or Times Roman for their body text (consider Google, Yahoo!, Stack Overflow...). Spicing headlines up with bitmapped images is, of course, part of the spice of web-life.
我使用 Cufón。它适用于所有现代浏览器,重量轻且相对容易设置。
I use Cufón. It works with all modern browsers, is light and relatively easy to set up.
您可以查看类似 sIFR 或 TypeKit,它将分别使用 flash 和 javascript 来修复自定义字体。
目前还没有很多浏览器能够正确支持
@font-face
。You could have a look at something like sIFR or TypeKit, which will use flash and javascript respectively to fix custom fonts.
There are not a lot of browsers that support
@font-face
properly yet.阅读这篇关于动态字体的文章。
那么,您想要动态字体,嗯?
Read this one about Dynamic fonts.
So, You Want Dynamic Fonts, Huh?
您说您“需要”为您的网页使用“hi-style”字体。如果这是真的,那么您需要接受鲍勃·考夫曼的答案。然而,使用图像作为文本的问题是它完全破坏了索引、搜索等。相反,请考虑不这样做并坚持使用优先排序的字体列表。
当您指定
font-family
时,您可以给出一个列表,并且将使用第一个匹配的字体。这允许优雅的降级——如果用户有你喜欢的字体,很好,但如果没有,则使用下一个最佳选项(由你定义),例如:更多关于
font-family
属性的 w3schools 页面。You say you "need" to use "hi-style" fonts for your webpage. If that's really true, you'll need to go with Bob Kaufman's answer. The problem with using images for text, though, is it completely breaks indexing, searches, etc. Instead, consider not doing it and sticking with a prioritized list of fonts instead.
When you specify the
font-family
, you can give a list, and the first matching font will be used. This allows for graceful degradation -- if a user has your fancy font, fine, but if not the next best option (as defined by you) is used, e.g.:More on the w3schools page for the
font-family
property.有些网页仅使用 Flash 影片作为标题,其中可以嵌入字体。您可以使用图像(自动生成)。我个人认为这都有点不专业,但不同的人在可用性和标准与设计之间的平衡不同。
如果您要重新分发字体,请务必考虑法律含义。
Some webpages use a Flash movie just for the headline, in which the typeface can be embedded. You could use images (automatically generated). I personally consider that all bit unprofessional, but different people balance usability and standards against design differently.
And if you are re-distributing fonts, make sure you look at the legal implications.
你可以通过起诉javascript来实现这一点。
这里有一个库作为示例。
可能有更多的库可以做同样的事情。
you can sue javascript to achieve this.
here's a library as an example.
There might be more libraries out there who can do the same thing.
您可以使用 CSS(如之前发布的)引用 .TTF 文件,如下所示: http://weston.ruter.net/2008/08/27/efficiently-serving-custom-web-fonts/
问候。
You can use CSS (as posted before) to reference the .TTF files as shown here: http://weston.ruter.net/2008/08/27/efficiently-serving-custom-web-fonts/
Regards.
如果您的网站上没有很多 IE 访问者,您可以使用 CSS 3 网络字体
If you don't have many IE visitors on your site you can use CSS 3 web fonts
取决于您想使用什么字体...最简单的解决方案是使用
@font-face
方法。如果您包含 Microsoft 专用格式 (.EOT),它将在任何浏览器中运行。Font Squirrel 拥有大量免费使用的商业字体套件,其中包括:
适用于 Firefox 3.5 和 Safari
可以快速开始
@font-face
方法不需要 Javascript 或 Flash,就像前面提到的 sIFR 和 Cufon 技术一样,因此更容易被所有人使用。它完全对 SEO 友好且可扩展。
Depends what font you want to use ... the easiest solution is to use the
@font-face
method. If you include the microsoft only format(.EOT) it will work in ANY browser.Font Squirrel has a great collection of free to use commercially, font kits, that include:
for Firefox 3.5 and Safari
can get going fast
The
@font-face
method doesn't require Javascript or Flash, like the previously mentioned sIFR and Cufon techniques, so is more accessible by all.It's totally SEO friendly and scalable.