CSS字体(font)

简写属性

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-sizefont-family,其余属性都是可选的

  • 若直接使用简写形式,那么省略的属性会采用默认值,相当于完整的写了一遍font的所有属性,可能会对想要继承的属性有影响

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

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

字体族

CSS字体(font)

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)

取值范围:xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage>

  • 较为常用的是数字+单位的组合,单位有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 | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

  • 字体拉伸只有在使用的字体有多个宽度的时候才会生效,不然都会是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;一样的效果
上一篇:Qt学习指南


下一篇:vue+element-ui更换本地字体