关于css里的@font-face 和font-family属性

时间:2022-11-30 23:15:12

1. font-family 用于指定采用什么样的字体,这个字体去哪里找呢??这个属性不会下载任何字体,会使用计算机里的已经下载安装的字体;


2. @font-face ,代码形如:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url('../fonts/open-sans-light.woff') format("woff");
}


它会去下载其中 src 指定地址的字体文件,其中指定相应的 font-family 的字体就会使用这个下载字体文件的字体;同时,指定的font-style和font-weight,我把它称为基准的字体大小和粗细,这也就解释了当你看到某个字体试图把它变细或变小却无果的原因。


3. 所以整个运行的过程可以解释为: font-family指定字体是否存在于用户计算机,如果存在,直接使用;如果不存在且这个font-family在@font-face里有所指定,那么会去下载相应的字体。


3. 一个字体可能有不同的字族,例如粗体,斜体等等,假如一个用户指下载了部分字体,也就可能造成显示的结果不一样了。