iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >CSS3中如何使用@Font-Face实现定制字体
  • 720
分享到

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

2024-04-02 19:04:59 720人浏览 泡泡鱼
摘要

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

这篇文章给大家分享的是有关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实现定制字体”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: CSS3中如何使用@Font-Face实现定制字体

本文链接: https://www.lsjlt.com/news/92026.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS3中如何使用@Font-Face实现定制字体
    这篇文章给大家分享的是有关CSS3中如何使用@Font-Face实现定制字体的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。使用 @Font-Face 实现定制字体  Web 设计...
    99+
    2024-04-02
  • 如何在css3中使用font-face自定义字体
    今天就跟大家聊聊有关如何在css3中使用font-face自定义字体,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。代码如下:@font-face { font-f...
    99+
    2023-06-09
  • CSS3中如何引入多种自定义字体font-face
    这篇文章主要介绍了CSS3中如何引入多种自定义字体font-face,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。今天在HTML中发现了一个问题,提供给我们默认的字体有很多,...
    99+
    2023-06-08
  • 如何使用CSS3@font-face属性
    本篇内容介绍了“如何使用CSS3@font-face属性”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!代码...
    99+
    2024-04-02
  • CSS如何在项目里引入自定义字体@font-face
    这篇文章将为大家详细讲解有关CSS如何在项目里引入自定义字体@font-face,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 添加自定义字体:  ①:首先需要下载所...
    99+
    2024-04-02
  • css中使用font-face改变字体即加载外部字体的方法
    这篇文章主要介绍“css中使用font-face改变字体即加载外部字体的方法”,在日常操作中,相信很多人在css中使用font-face改变字体即加载外部字体的方法问题上存在疑惑,小编查阅了各式资料,整理出...
    99+
    2024-04-02
  • css3的@fant-face中怎么使用字体化图标
    本文小编为大家详细介绍“css3的@fant-face中怎么使用字体化图标”,内容详细,步骤清晰,细节处理妥当,希望这篇“css3的@fant-face中怎么使用字体化图标”文章能帮助大家解决疑惑,下面跟着...
    99+
    2024-04-02
  • 如何通过CSS的@font-face属性实现在网页中嵌入任意字体
    本文小编为大家详细介绍“如何通过CSS的@font-face属性实现在网页中嵌入任意字体”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何通过CSS的@font-face属性实现在网页中嵌入任意字体”文章能帮助大家解决疑惑,下面跟着小编的...
    99+
    2023-06-26
  • 如何使用CSS3实现字体描边
    小编给大家分享一下如何使用CSS3实现字体描边,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! CSS3实现字体描边的两种方法 ...
    99+
    2024-04-02
  • css中如何解决引入指定字体@font-face兼容各浏览器的问题
    这篇文章将为大家详细讲解有关css中如何解决引入指定字体@font-face兼容各浏览器的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。网页制作中,如果想使用特定的字体可以通过 @font-face ...
    99+
    2023-06-08
  • gulp-font-spider如何实现中文字体包压缩
    这篇文章主要讲解了“gulp-font-spider如何实现中文字体包压缩”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“gulp-font-spider如何实现中文字体包压缩”吧!1.背景在...
    99+
    2023-07-05
  • 使用CSS3如何实现字体颜色渐变
    这篇文章主要为大家展示了使用CSS3如何实现字体颜色渐变,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“使用CSS3如何实现字体颜色渐变”这篇文章吧。在使用Animation.css的时候发现它的官...
    99+
    2023-06-08
  • 如何利用css3实现下凹型字体
    这篇文章给大家介绍如何利用css3实现下凹型字体,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。方法:1、使用color属性将字体颜色设置的和背景色一致;2、使用text-shadow属...
    99+
    2024-04-02
  • 如何使用css3实现字体凹陷凸出效果
    这篇文章主要介绍了如何使用css3实现字体凹陷凸出效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。示例如下:   <!DOCTYP...
    99+
    2024-04-02
  • css3如何实现字体渐变色
    今天小编给大家分享一下css3如何实现字体渐变色的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2024-04-02
  • css如何使用font-family 属性定义文本的字体系列
    这篇文章主要介绍css如何使用font-family 属性定义文本的字体系列,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 使用普片字琐屑列 假设你祈望文档使用一种 sans-s...
    99+
    2024-04-02
  • css3如何实现字体放大缩小动画
    这篇文章主要讲解了“css3如何实现字体放大缩小动画”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3如何实现字体放大缩小动画”吧! ...
    99+
    2024-04-02
  • 微信小程序如何使用CSS3字体
    今天小编给大家分享一下微信小程序如何使用CSS3字体的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。@font-face是CS...
    99+
    2023-06-26
  • 如何使用css3来实现数字换行
    这篇文章主要介绍了如何使用css3来实现数字换行,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 在css中,可以...
    99+
    2024-04-02
  • css中如何使用font-variant属性设定小型大写字母
    小编给大家分享一下css中如何使用font-variant属性设定小型大写字母,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! font-variant 属性或者设定小型大写字母。 ...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作