什么是@font-face? - Githubissues

coollcoder / toolbar

MIT License

0 stars 0 forks source link

什么是@font-face? #2

Open kaneruan opened 8 years ago

kaneruan commented 8 years ago

@font-face是css3的一个模块，常用于Logo,tags

@font-face {
       font-family: <YourWebFontName>;
       src: <source> [<format>][,<source> [<format>]]*;
       [font-weight: <weight>];
       [font-style: <style>];
     }

YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体（下载回来的叫什么字体，这里就填什么字体名），他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
source:此值指的是你自定义的字体的存放路径，可以是_相对路径_也可以是_绝对路径_；

kaneruan commented 8 years ago

其次是format自定义字体格式，主要用来帮助浏览器识别，有一下类型

TrueType:即.ttf格式
OpenType:即.otf -Web Open Font Format:即.woff,.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离
Embeded Open Type:即.eot
SVG:.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器

kaneruan commented 8 years ago

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持

kaneruan commented 8 years ago

.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】

kaneruan commented 8 years ago

阿里图标字体库下面是一个例子

@font-face {font-family: 'webfont';
  src: url('//at.alicdn.com/t/eb26m88i104o0f6r.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/eb26m88i104o0f6r.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/eb26m88i104o0f6r.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/eb26m88i104o0f6r.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/eb26m88i104o0f6r.svg#思源黑体-极细') format('svg'); /* iOS 4.1- */
}