使用CSS3的font-face字体嵌入样式的方法讲解

所属分类: 网页制作 / CSS 阅读数: 1102
收藏 0 赞 0 分享

对于一个出色的网页,字体的选择是相对关键的,无奈设计师必须考虑用户的本地端是否有相应的字体,因此设计常常只能使用一些较为大众化的常见字体,而舍弃更加适合的字体。在 CSS3 中,这一情况将可以改变。CSS3 中引入了 font-face(嵌入字体类型),实验 font-face 可以把需要的字体上传到自己的服务器,再在服务器的网页中使用该字体并显示出来,无论浏览网页的用户的本地端是否有该字体。

语法:

CSS Code复制内容到剪贴板
  1. @font-face { font-family : name ; src : url ( url ) ; sRules }   

取值:
name  :? 字体名称。任何可能的 font-family 属性的值
url ( url )  :? 使用绝对或相对 url 地址指定OpenType字体文件
sRules  :? 样式表定义

说明:
设置嵌入HTML文档的字体。此规则无默认值。
此规则使你能够在网页上使用客户端本地系统上可能没有的字体。 url 地址必须指向 OpenType 字体文件(.eot或.ote)。此文件包含可以转换为 TrueType 字体的压缩字体数据,可以用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。

示例:
例如下面的效果:
2016513113814566.png (1004×204)

CSS Code复制内容到剪贴板
  1. @font-face {   
  2.     font-family'vanessalovesyoumedium';   
  3.     srcurl('vanessalovesyou-webfont.eot');   
  4.     srcurl('vanessalovesyou-webfont.eot?#iefix'format('embedded-opentype'),   
  5.          url('vanessalovesyou-webfont.ttf'format('truetype'),   
  6.     font-weightnormal;   
  7.     font-stylenormal;   
  8. }   
  9. #test-font {   
  10.     font-size24px;   
  11. }   
  12. #test-font span{   
  13.     font-family: vanessalovesyoumedium;   
  14. }  

使用 @font-face 定义字体所需要的文件,为了兼容各个浏览器,需要使用多种不同的字体格式,建议至少要有 .eot 和 .ttf 两种格式,.eot 用于 IE5+ ,.ttf 用于 Chrome 等现代浏览器,另外 .otf 也是不错的选择,也可以用于现代浏览器。

需要注意以下几点:
1.IE8及更早浏览器只支持微软自有的 .eot 格式
2.IE9.0-10.0部分支持 ttf 和 otf 字体格式
3.现代浏览器大多支持 .ttf 和 .otf 两种格式
4.现代浏览器需要从外部引用 @face-font 才能有效,IE 则可以直接在页面中使用 @face-font

更多精彩内容其他人还在看

CSS3实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

这篇文章主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多