文本样式

font-family:这是文本字体。

  • 使用“,”分隔的字体族名称,如 font-family: Arial, Helvetica, sans-serif
  • 初始值由浏览器设置决定,可以继承

字体匹配算法

  1. 浏览器先获取一个系统字体列表
  2. 对元素的每一个字符,使用font-family属性及其他属性进行匹配,如果能匹配就暂定该字体
  3. 如果步骤2没有匹配上,选择下一个可选的font-family执行步骤2
  4. 如果匹配到一个字体,但是字体中没有该字符,继续对下一个可选的font-family执行步骤2
  5. 如果没有匹配到字体,使用浏览器默认字体

font-family使用:

  • 英文字体放在中文字体前面
  • 最后总是添加通用字体族

font-size: 文本大小,可以使用px,百分比等作为单位。


font-style

  • 定义文字也斜体还是正常方式显示
  • 取值:normal(正常)|italic(倾斜)| oblique(伪斜体)
  • 初始值为normal,可以继承

font-weight

  • 定义文字的粗细程度
  • 取值:normal | bold | bolder | lighter | 100 | 200 | ... | 900
  • 初始值为normal,可以继承
  • 一般使用normalbold

line-height

  • 元素所属的line box的高度,即文本所在行的高度
  • 始值为normal(具体指由浏览器决定),可以继承
  • 取值:<长度> | <数字> | <百分比>
  • 段落文字一般取值 1.4 ~ 1.8

Web Fonts
使用网络上或者本地自定义的字体。使用方法如下:

    @font-face {
      font-family: 'fontname';
      src: url('../fonts/webfont.eot');
      src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/webfont.woff') format('woff'),
     url('../fonts/webfont.ttf') format('truetype'),
     url('../fonts/webfont.svg#NeuesBauenDemo') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    div {
      font-family: 'fontname'
    }

text-align

  • 定义文本在容器内的对齐方式
  • 取值: leftrightcenterjustify

letter-spacing

  • 指定字符之间的间距
  • 取值:normal<length>

word-spacing

  • 指定单词之间的间距
  • 取值:normal<length>

text-indent

  • 指定文本缩进
  • 取值:normal<length>, <percentage>
  • 默认不缩进

text-decoration

  • 定义了文本的装饰效果,如下划线,删除线等
  • 初始值为none,可以继承
  • 取值:underline(下划线),line-through(中划线),overline(上划线)

white-space

  • 指定空白符如何处理
  • 取值:normalnowrappre
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容