美文网首页
文本样式

文本样式

作者: 霜之朝 | 来源:发表于2017-11-10 14:41 被阅读0次

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

相关文章

  • CSS-基础

    选择器样式:背景/大小样式:文本/字体 选择器 样式:背景/大小 样式:文本/字体 样式:边框 样式:内边距 样式...

  • Flutter组件

    文本及样式 Text: 显示简单样式文本TextStyle: 指定文本显示的样式TextSpan: 对一个Text...

  • Css样式--文本样式详解

    Css样式--文本样式详解 文本样式包括所谓的文本缩进:text-indent水平对齐:text-align:ce...

  • CSS(四)文本样式设置

    颜色表及HTML代码(部分) 文本样式 文本样式:对齐方式、文本修饰文本转换、文本缩进.... 作用:美化、修饰页...

  • CSS-1

    全局样式 类样式 背景样式 外部样式 文本样式 属性属性值作用color表示颜色的内容设置文本颜色directio...

  • HTML03-day

    文本标签 列表 颜色单位 字体分类 字体样式 行间距 颜色单位 字体其他样式 文本样式

  • 文本样式

    em即“emphasize”。 表示强调, 表示更强烈的强调。 默认样式是斜体, 默认...

  • 文本样式

    字体 通过font-family可以同时指定多个字体例如:p{font-family:Arial , Helvet...

  • 文本样式

    文本标签 em标签用于表示一段内容中的着重点。strong标签用于表示一个内容的重要性。通常em显示为斜体,而st...

  • 文本样式

    1. 文本对齐方式 text-align left(左对齐,默认值)right(右对齐)center(居中对齐)j...

网友评论

      本文标题:文本样式

      本文链接:https://www.haomeiwen.com/subject/hvsbmxtx.html