CSS字体(font)

2021-11-02 17:04:15 阅读：273 来源： 互联网

标签：family normal serif 字体 font CSS SwitzeraADF

简写属性

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS字体(font)

简写属性

字体族

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

font-weight

font-size

font-style

font-stretch

font-kerning

font-variant