CSS3 自定义 Font Face 在 html 视图中无法正常工作

发布于 2024-11-07 15:33:42 字数 724 浏览 0 评论 0原文

亲爱的朋友们, 我试图找出这里出了什么问题,为什么字体集在 FireFox 4 的 html 实时视图中无法正确显示......我一无所知!任何见解我将不胜感激。任何都可以!提前致谢。干杯!

<style type="text/css" rel="stylesheet">
@charset "utf-8";

@font-face{
  font-family: "ZZZ";
  src: local('FONT'),
      url('http://www.site.org/FONT.ttf') format('truetype'),
      url('http://www.site.org/FONT.eot') format('eot'),
      url('http://www.site.org/FONT.otf') format ('otf'),
      url('http://www.site.org/FONT.woff') format('woff')
}

html, body{font-family: "ZZZ" !important}

附言。我故意将名称更改为“ZZZ”,而不是本地文件名“FONT”,这样我就可以确保如果有人本地没有该字体,它将继续下载 CSS3 url。然而,这不起作用...(当将 ZZZ 更改为 Lithos Pro Regular 时,它可以工作,但这不是挑战...我希望它在不存在本地字体文件时自然工作。

Dear folks,
Im trying to figure out what is wrong in here, why the fonts set do not show up correctly in html live view in FireFox 4... I am clueless! Any insight will be greatly appreciated by me. Any at all! Thanks in advance. Cheers!

<style type="text/css" rel="stylesheet">
@charset "utf-8";

@font-face{
  font-family: "ZZZ";
  src: local('FONT'),
      url('http://www.site.org/FONT.ttf') format('truetype'),
      url('http://www.site.org/FONT.eot') format('eot'),
      url('http://www.site.org/FONT.otf') format ('otf'),
      url('http://www.site.org/FONT.woff') format('woff')
}

html, body{font-family: "ZZZ" !important}

.

PS. I changed the name to "ZZZ" deliberately into something else than the local file name "FONT" so that way I can assure that if someone does NOT have the font locally, it will proceed to download CSS3 url. This however does not work... (when changing ZZZ to Lithos Pro Regular, it works but that is no challenge... I want it to work naturally when no local font file is present.

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

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

发布评论

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

评论(3

£冰雨忧蓝° 2024-11-14 15:33:42

这里有一个很好的指南

http:// blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

看起来这可能是版本支持问题 - 您使用的 Firefox 版本是什么?

There is an excellent guide here

http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

Looks like this could be a version support issue - what version of firefox you using?

謌踐踏愛綪 2024-11-14 15:33:42

Internet Explorer 仅支持 .eot 类型字体,Firefox、Chrome、Safari 和 Opera 支持 .ttf.otf 类型字体。

Internet Explorer only supports .eot type fonts and Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.

秋日私语 2024-11-14 15:33:42

尝试像这样放置本地字体:

html, body{font-family: "LithosProRegular", "ZZZ" !important}

Try placing the local font like this instead:

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