正在进入ing...

CSS3引入自定义字@font-face详解

发布时间:2020-09-08 浏览量: 1524 文章分类: 前端相关

最近在看一些CSS3的新特性,今天将CSS3的外部字体引入@ font-face学习内容记录一下,方便日后查证,同时有理解错误的,也欢迎指正,共同进步。

首先日常的网页开发,我们自己想用一些特殊的字体,但是如果用户的电脑上没有的话,是无法展示出来的,所以CSS3就新增了这个模块,可以让我们方便的自己引入自定义的字体。也可以理解为,我们将字体放在我们的服务器上,用户在访问的同时也下载了字体到他本地,在用下载的字体去渲染网页。

CSS3 @ font-face语法规则

@font-face{
  font-family:字体名称;
  src:<source>[<format>][,<source>[<format>]]*;
  [font-weight:<weight>]; /*选填*/
  [font-style:<style>];   /*选填*/
}

在兼容性方面,兼容了:IE9+、FireFox3.5+、Chorme4+、Safari3.2+、Opera10+ @ font-face取值说明

  • YourWebFontName 自定义的字体名称,他讲被引入到Web元素中的font-family;
  • source 自定义字体的存放路径,可以是相对路径也可以是绝对路径(建议使用相对路径);
  • format 自定义字体的格式,主要是用来帮助浏览器识别;
  • weight和style weight定义字体是否为粗体,style主要是定义字体的样式,比如斜体等;

@ font-face的字体格式说明(字体种类确实很多)

  • TrueType(.ttf)格式

    .ttf格式字体是Windows和Mac的常见字体,是一种RAW(写入式)格式,因此他不为网站优化; 兼容性:IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+

  • OpenType(.otf)格式

    .otf字体是被认为一种原始的字体格式,在内置TrueType的基础上,也提供了更多的功能 兼容性:FireFor3.5+、Chrome4+、Safari3.1+、Opera10+、iOS Mobile Safari4.2+、IE不兼容

  • WebOpenFontFormat(.woff)格式

    .woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离 兼容性:IE9+、FireFox3.5+、Cheome6+、Safari3.6+、Opera11.1+、苹果移动端不兼容

  • EmbeddedOpenType(.eot)格式

    .eot字体是IE专用字体,可以从TrueType创建此格式字体 兼容性:IE4+,别的都不兼容

  • SVG(.svg)格式

    .svg字体是基于SVG字体渲染的一种格式 兼容:Chrome4+、Safari3.1+、Opera10+、iOS Mobile Safari3.2+、IE、FireFox不兼容

@ font-face字体应用

有时候为了保证能覆盖更多的浏览器兼容,同样的字体,会尽可能多的格式共同使用,比如.woff.eot.svg,所以是可以写一个通用模板 模板语法:

@ font-face{
  font-familt:"YourWebFontName";
  src:url('YourWebFontName.eot'); /*兼容IE9以上浏览器*/
  src:url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /*兼容IE6-IE8*/
    url('YourWebFontName.ttf') format('truetype'), /*兼容 Safari,Android,iOS 移动端*/
    url('YourWebFontName.woff') format('woff'), /* 兼容所有浏览器 Modern Browsers*/
    url('YourWebFontName.svg#YourWebFontName') format('svg'); /*针对iOS开发 Legacy iOS*/
}

实际使用样例:

<style>
@ font-face{
  font-familt:'myFont';
  src:url('myFont.eot');
  src:url('myFont.eot?#iefix') format ('embedded-opentype'),
    url('myFont.ttf') format('truetype'),
    url('myFont.woff') format('woff'),
    url('myFont.svg#myFont') format('svg');
}
h1 {font-family:"myFont";}
</style>

补充说明

有时候找字体的时候,我们只能找到其中的一款字体,比如.ttf的,但是又没有其他类型的文件,推荐可以在下面的网站可以通过上传来获取其余的字体。 Fontsquirrel https://www.fontsquirrel.com/tools/webfont-generator