如何在网站中使用我们自己的字体,并与所有用户兼容?

发布于 2024-08-06 23:40:55 字数 82 浏览 3 评论 0 原文

我需要在我的网页中使用不同的 hi-style 字体。但我担心,如果用户没有这样的字体,那么它们将以默认字体显示。如何使用不同的新字体来兼容所有用户?

I need to use different hi-style fonts in my webpage. But i had fear that, if the user had no such font, then they will be displayed with default font. How to use different new font that should be compatible with all users?

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

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

发布评论

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

评论(10

蘑菇王子 2024-08-13 23:40:55

考虑使用每个人都使用的普通字体作为正文,即大部分内容。有相当多的可供选择。对于标题,请使用绘图包(例如,MS Paint、Photoshop)将标题格式设置为使用您喜欢的字体的图像。如果你想为你的正文添加更漂亮的字体,你总是可以在你的 CSS 中使用类似的东西:

font-family: <some-fancy-typeface>, Calibri, "Gill Sans MT", Helvetica, Tahoma, Arial, sans-serif;

记住它会首先尝试使用你更漂亮的字体,然后回退到更普通的选择列表,直到匹配被发现。请记住,从可用性的角度来看,大多数人更喜欢使用像 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:

font-family: <some-fancy-typeface>, Calibri, "Gill Sans MT", Helvetica, Tahoma, Arial, sans-serif;

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.

恏ㄋ傷疤忘ㄋ疼 2024-08-13 23:40:55

我使用 Cufón。它适用于所有现代浏览器,重量轻且相对容易设置。

I use Cufón. It works with all modern browsers, is light and relatively easy to set up.

眉目亦如画i 2024-08-13 23:40:55

您可以查看类似 sIFRTypeKit,它将分别使用 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.

云柯 2024-08-13 23:40:55

阅读这篇关于动态字体的文章。

那么,您想要动态字体,嗯?

动态字体

动态字体是随字体一起下载的字体样式文件
将使用它们的页面。想想
他们作为一个图像。这就是基本的
概念。

当您使用这些字体时,字体文件将下载到您的
就像图像一样缓存。一旦到了那里,
只要你不清除缓存
完全,字体将在那里
所有未来的访问。观看很有趣
您第一次使用这些页面时的页面
字体。页面将完全显示
文本采用默认格式。
然后,一旦有了字体,
下载,整个页面重新加载并且
变得栩栩如生。效果非常好。

这些字体的使用基本上都是Netscape Navigator 4.0或者
更好的交易。不过,您也可以
使用 MSIE 4.0 查看字体和
上面如果你还包括,以及
字体,Active X 助手
应用程序。

Read this one about Dynamic fonts.

So, You Want Dynamic Fonts, Huh?

Dynamic Fonts

Dynamic fonts are font style files that download right along with
the page that will use them. Think of
them as an image. That's the basic
concept.

When you use these fonts, the font file will download into your
cache just like an image. Once there,
as long as you don't clear your cache
completely, the font will be there for
all future visits. It is fun to watch
the page the first time you use these
fonts. The page will come in fully
with the text in the default format.
Then, once the font, or fonts,
download, the entire page reloads and
comes to life. It's a great effect.

The use of these fonts is basically a Netscape Navigator 4.0 or
better deal. However, you can also
view the fonts using MSIE 4.0 and
above if you also include, along with
the font, an Active X helper
application.

固执像三岁 2024-08-13 23:40:55

您说您“需要”为您的网页使用“hi-style”字体。如果这是真的,那么您需要接受鲍勃·考夫曼的答案。然而,使用图像作为文本的问题是它完全破坏了索引、搜索等。相反,请考虑不这样做并坚持使用优先排序的字体列表。

当您指定font-family时,您可以给出一个列表,并且将使用第一个匹配的字体。这允许优雅的降级——如果用户有你喜欢的字体,很好,但如果没有,则使用下一个最佳选项(由你定义),例如:

body {
  font-family: "Nifty Cool Font", "Times New Roman", Georgia, Serif;
}

更多关于 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.:

body {
  font-family: "Nifty Cool Font", "Times New Roman", Georgia, Serif;
}

More on the w3schools page for the font-family property.

魄砕の薆 2024-08-13 23:40:55

有些网页仅使用 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.

喵星人汪星人 2024-08-13 23:40:55

你可以通过起诉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.

守护在此方 2024-08-13 23:40:55

您可以使用 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.

樱娆 2024-08-13 23:40:55

如果您的网站上没有很多 IE 访问者,您可以使用 CSS 3 网络字体

If you don't have many IE visitors on your site you can use CSS 3 web fonts

溺渁∝ 2024-08-13 23:40:55

取决于您想使用什么字体...最简单的解决方案是使用 @font-face 方法。如果您包含 Microsoft 专用格式 (.EOT),它将在任何浏览器中运行。

Font Squirrel 拥有大量免费使用的商业字体套件,其中包括:

  • 原创 TrueTypeOpenType 字体
    适用于 Firefox 3.5 和 Safari
  • EOT 字体 适用于 Internet Explorer
  • SVG 字体 适用于 Opera、iPhone 和 Chrome
  • 适用于 Firefox 3.6+ 的
  • WOFF 字体Demo.html 和 stylesheet.css,以便您
    可以快速开始

@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:

  • Original TrueType or OpenType Fonts
    for Firefox 3.5 and Safari
  • EOT fonts for Internet Explorer
  • SVG fonts for Opera, iPhone & Chrome
  • WOFF fonts for Firefox 3.6+
  • Demo.html and stylesheet.css so you
    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.

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