CSS字体(font)

2021-11-02 17:04:15 作者：互联网

简写属性

font: [[<font-style> || [normal | small-caps] || <font-weight>]? <font-size> [/<line-height>]? <font-family>] | caption | icon | menu | message-box | small-caption | status-bar
初始值：font-style:normal,font-weight:normal,font-size:medium,line-height:1
举例：font: italic normal bold 1.5rem/1.2 Verdana, Helvetica, Arial, sans-serif;

在最大的[]里除了font-size和font-family，其余属性都是可选的
若直接使用简写形式，那么省略的属性会采用默认值，相当于完整的写了一遍font的所有属性，可能会对想要继承的属性有影响

在最大的[]外的属性值可以让字体设置成操作系统字体值

button { font: caption; } /* 按钮的字体和操作体统中的按钮一样 */
/*
caption：用于说明文字的控件(如按钮)、 
icon：标注图标、 
menu：下拉菜单和菜单列表、
message-box：对话框、
small-caption：标注小型控件、
status-bar：窗口的状态栏
*/

字体族

css定义了5种通用的字体族：衬线字体族、无衬线字体族、等宽字体族、手写字体族、奇幻字体族。有一篇文章清楚地讲述了字体族的特点和区别：五类字体serif，sans-serif，monospace，cursive和fantasy

在font-family属性中使用通用字体族(serif, sans-serif,monospace,cursive,fantasy)，那就会依赖浏览器默认的字体(当然这个字体属于你选择的通用字体族)
在指定的字体名称后面添加类似效果的字体名称或通用字体族，确保该字体失效还能有类似的字体替代，不然会采用系统默认字体

如果字体名称有空格，应使用引号(这点不是强制的)，但如果字体名与关键字(可能是字体族)冲突，那就一定要用引号

body {
	font-family: serif;
  font-family: Georgia, serif;
  font-family: Times, 'Times New Roman', Georgia, 'New York', serif;
  font-family: 'cursive', cursive;
}

使用@font-face：自定义字体

@font-face {
  /* 必须的描述属性，font-family和src，一个指定被引用时的名称，一个指定字体资源的链接 */
  font-family: <family-name>;
  src: [[<uri>[format(<string>#)]?]|<font-face-name>]#;
  /* 其他描述 */
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  font-variant: normal;
  font-feature-settings: normal;
  unicode-range: U+0-10FFFF;
}

在@font-face使用的属性值仅作为描述作用，不能改变字体的样式，比如：一款自定义字体有不同属性（粗细、字宽等），被引用时通过描述区分

/* 正常字型 */
@font-face {
  font-family: 'SwitzeraADF';
  src: url('SwitzeraADF-Regular.otf') format('opentype');
  font-weight: normal;
}
/* 粗体字型 */
@font-face {
  font-family: 'SwitzeraADF';
  src: url('SwitzeraADF-Bold.otf') format('opentype');
  font-weight: bold;
}

@font-face是惰性加载字型的，需要用到的时候才会加载；但浏览器不管是否需要都会全部下载缓存
使用@font-face可以自定义网页上的字体，如果字体资源失效或格式不被浏览器支持，文本会使用备用的字体显示

不同时代的不同浏览器支持的字体格式可能不同，可以使用下面的模版做到兼容(其余属性采用默认)：

@font-face {
  font-family: 'SwitzeraADF';
  src: url('SwitzeraADF-Regular.eot');	/* 针对ie9 */
  src: url('SwitzeraADF-Regular.eot?#iefix') format('embedded-opentype'), /* 针对ie6～ie8 */
    	 url('SwitzeraADF-Regular.woff') format('woff'),	/* 针对多数现代桌面浏览器 */
    	 url('SwitzeraADF-Regular.ttf') format('truetype'),	/* 针对ios和android设备 */
    	 url('SwitzeraADF-Regular.svg#switzera_adf_regular') format('svg');	/* 针对旧款的ios设备 */
}

在线字体格式转换网站：cloudconvert

font-weight

初始值：normal

取值范围：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

100或200可能是一样的效果，这个跟字体的字重等级划分有关(小于9)，也就是说值名称对应某个数字区间，在这个区间内字重不会发生改变

font-size

初始值：medium(默认16px)

较为常用的是数字+单位的组合，单位有em、rem、px、pt等
采用百分数的时候，会基于父元素的字号计算，1em == 100%
在某些浏览器中，等宽字体字号设置为基于父元素相关的值(父元素字号为medium)，不会基于父元素的字号计算，而是浏览器默认的等宽字号(默认13px)，可以采用font-family: monospace, serif;解决，即添加serif
推荐使用em或者rem，而不推荐使用像素值，因为绝对单位在不同的设备中表现的不一样

font-style

初始值：normal

取值范围：italic | oblique | normal

italic(斜体)和oblique(倾斜体)通常使用同一款字型，可以做到相互替代

font-stretch

初始值：normal

字体拉伸只有在使用的字体有多个宽度的时候才会生效，不然都会是normal效果

font-kerning

初始值：auto

取值范围：auto | normal | none

none：用户代理忽略字体中的字距信息
normal：用户代理正常处理字距，即使用字体中的字距数据
auto：让用户代理选择合适的处理方式，具体怎么做依赖于使用的字体

font-variant

初始值：normal

取值范围：normal | small-cap (css2.1) (css3)

small-cap：类似于text-form: upperform;，区别：大写字母采用较大的大写字母显示，小写字母采用较小的大写字母显示
使用的字体不存在small-cap字型，用户代理可能会自己创建或者采用text-form: upperform;一样的效果

标签：family,normal,serif,字体,font,CSS,SwitzeraADF
来源： https://www.cnblogs.com/Your-songs-are-so-good/p/15495877.html