CSS3中如何使用@Font-Face实现定制字体

发布时间:2022-03-07 15:22:13 作者:小新
来源:亿速云 阅读:114

这篇文章给大家分享的是有关CSS3中如何使用@Font-Face实现定制字体的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

使用 @Font-Face 实现定制字体

  Web 设计中有几种字体是比较安全的,如 Arial,Helvetica, Verdana, Georgia, Comic Sans (中文的,一般来说宋体是唯一安全的 - 译者),现在,使用 CSS3 的 @font-face 可以自己指定字体,不过因为牵扯到版权问题,实际能用的字体也是有限的 (另外,体积庞大的中文字体也是一个不好解决的问题 - 译者)。

  语法如下:

  @font-face {
  font-family:'Anivers';
  src: url('/images/Anivers.otf') format('opentype');
  }

  支持的浏览器: Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折,如果你不怕麻烦,可以在 IE 实现这个功能,请参考: make font-face work in IE )

  虽然 CSS3 尚在开发中,上面提到的这些功能已经可以在部分浏览器中使用了,尤其是 Safari。不幸的是,Safari 并非主流浏览器。

  Firefox 目前拥有大量用户基础,另外,即将推出的 Firefox 3.1 支持不少 CSS3 效果,因为 Firefox 用户的升级积极性很高,因此,会有不少用户可以提前体验 CSS3 的新功能。

  Google Chrome 今年刚刚发布,它基于 Webkit 引擎,因此和 Safari 很相似,因为 Safari 主要用于 Mac 市场,Chrome 可以正好弥补 Windows 市场的空缺。

  根据统计数据,2008年11月止,44.2% 的用户使用 Firefox, 3.1% 使用 Chrome, 2.7% 使用 Safari,意味着 CSS3 的部分功能已经可以支持近半 Internet 用户,而在 Web 设计圈子,这个比例可能更高,大约有 73.6% (Blog.SpoonGraphics 提供的数据)

感谢各位的阅读!关于“CSS3中如何使用@Font-Face实现定制字体”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. 使用CSS3的 @font-face 显示自定义字体
  2. 怎么使用css3实现字体内发光效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3 @font-face

上一篇:mpvue开发小程序的难点有哪些

下一篇:mpvue calendar怎么使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》