search

wang1dot0 / personal-note

记录工作中遇到的个人觉得比较有意思的小问题
https://github.com/wang1dot0/personal-note
0 stars 0 forks source link

[CSS] 字体 #24

Open wang1dot0 opened 4 years ago

wang1dot0 commented 4 years ago

使用@font-face

@font-face 的作用是让你在设计中使用自定义的字体。 @font-face 是惰性加载字体的。但是浏览器有缺陷：它不管是否需要，都会先行下载声明的全部字体。

@font-face {
  font-family: required
  src: local('Switzera-regular'),
        url('swit.otf') format('opentype'),
        url('swit1.true') format('truetype');
}

src中的url有个限制，字型必须与样式表同源。但是，可以使用CORS设定服务器来跨域。 format指定字体格式，从而减少带宽，还能为不带有常规扩展名的字体文件指定样式，以防用户代理不识别。 local 指定已安装在用户设备上的字体族（可以是多个）

常用字体格式

embedded-opentype EOT
opentype OTF
svg SVG
truetype TTF
woff WOFF

万全之策

@font-face {
  font-family: "SwitzeraADF";
  src: url("SwitzeraADF-Regular.eot");
  src: url("SwitzeraADF-Regular.eot?#iefix") format("embedded-opentype"),
       url("SwitzeraADF-Regular.woff") format("woff"),
       url("SwitzeraADF-Regular.ttf") format("truetype"),
       url("SwitzeraADF-Regular.svg#switzera_adf_regular") format("svg");
}