正在进入ing...

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

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

最近在看一些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