font-face 详解-阿里云开发者社区

开发者社区> 开发与运维> 正文

font-face 详解

简介: 版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82862181 ...
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82862181

@font-face 是 CSS3 的一个模块,其主要作用是可将自定义字体嵌入到网页中,让网页字体的运用不只是限定在 Web 安全字体中

更多精彩

语法

  1. webFontName: 引入的自定义字体名称,将会为指定的元素添加 font-family: webFontName
  2. source: 字体路径
  3. format: 字体格式,用于帮助浏览器识别,truetype opentype truetype-aat embedded-opentype svg …
  4. weight: 字体是否粗体
  5. style: 字体样式
@font-face {
	font-family: <webFontName>;
	src: <source> [<format>][,<source> [<format>]]*;
	[font-weight: <weight>];
	[font-style: <style>];
}

格式

  1. truetype - ttf
    • Windows 和 Mac 最常见字体
    • RAW 格式,不为任何网站优化
    • IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+
  2. opentype - otf
    • 原始字体格式,内置在 truetype 基础之上
    • 提供更多功能
    • Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile Safari4.2+
  3. web-open-font-format - woff
    • Web 字体最佳格式
    • 是一个开放的 truetype、opentype 压缩版本
    • 支持元数据包的分离
    • IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
  4. embedded-opentype - eot
    • IE 专用字体
    • 可以从 truetype 创建此格式
    • IE4+
  5. svg - svg
    • 基于 svg 渲染
    • Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+
@font-face {
	font-family: 'webFontName';
	src: url('webFontName.eot'); /* IE9 Compat Modes */
	src: url('webFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webFontName.woff') format('woff'), /* Modern Browsers */
		 url('webFontName.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('webFontName.svg#webFontName') format('svg'); /* Legacy iOS */
}

使用

  1. 获取自定义字体的原始文件,可前往 DaFont 下载
  2. Font Squirrel 将字体转换为兼容各浏览器的 Web 字体
  3. 按上述兼容性语法指定 @font-face 中的字体
  4. 在指定元素中调用该自定义字体

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章