文本

Table of Contentsgenerated with DocToc

文本

See the Pen FEND_Fonts by Li Xinyang (@li-xinyang) on CodePen.

字体

改变字号

font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit

  • <absolute-size> 有 small large medium
  • <relative-size> 有 smaller larger
  2. div
  3.   font-size 12px
  4.   p#sample0
  5.     font-size 16px
  6.   p#sample1
  7.     font-size 2em
  8.   p#sample2
  9.     font-size 200%

NOTE：以上两值在开发中并不常用。2em 与 200% 都为父元素默认大小的两倍（参照物为父元素的字体大小 12px）。

改变字体

font-family: [ <family-name> | <generic-family> ]#

<generic-family> 可选选项，但具体使用字体由浏览器决定

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace
  2. font-family: arial, Verdana, sans-serif;

NOTE：优先使用靠前的字体

加粗字体

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

  2. font-weight: normal;
  3. font-weight: bold;
倾斜字体

font-style: normal | italic | oblique | inherit

italic 使用字体中的斜体，而 oblique 在没有斜体字体时强制倾斜字体。

更改行距

line-height: normal | <number> | <length> | <percentage>

normal 值为浏览器决定，在1.1至1.2之间（通常设置值为1.14左右）

  2. /* length 类型 */
  3. line-height: 40px;
  4. line-height: 3em;
  5. /* percentage 类型 */
  6. line-height: 300%;
  7. /* number 类型 */
  8. line-height: 3;

NOTE：当line-height为 number 类型时，子类直接继承其数值（不计算直接继承）。而当为 percentage 类型时，子类则会先计算再显示（先计算后继承）。

字间距（字母间距）

letter-spacing: normal | <length>

其用于设置字间距或者字母间距，此属性适用于中文或西文中的字母。如果需要设置西文中词与词的间距或标签直接的距离则需要使用 word-spacing。

word-spacing: normal | <length>

font shorthand

font: [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar

  2. font: 30px/2 "Consolas", monospace;
  3. font: italic bold 20px/1.5 arial, serif;
  4. font: 20px arial, serif;

NOTE：当其他值为空时，均被设置为默认值。

改变文字颜色

color: <color>

  2. element { color: red; }
  3. element { color: #f00; }
  4. element { color: #ff0000; }
  5. element { color: rgb(255,0,0); }
  6. element { color: rgb(100%, 0%, 0%); }
  7. element { color: hsl(0, 100%, 50%); }
  9. /* 50% translucent */
  10. element { color: rgba(255, 0, 0, 0.5); }
  11. element { color: hsla(0, 100%, 50%, 0.5); }
  13. /* 全透明 */
  14. element { color: transparent' }
  15. element { color: rgba(0, 0, 0, 0); }

对齐方式

文字居中

text-align: start | end | left | right | center | justify | match-parent | start end

NOTE：默认为文本左对齐。

文本垂直对齐

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

NOTE：<percentage>的参照物为line-height

文本缩进

text-indent: <length> | <percentage> && [ hanging || each-line ]

NOTE：缩进两个字可使用 text-indent: 2em;

格式处理

保留空格格式

white-space: normal | pre | nowrap | pre-wrap | pre-line

pre 行为同 <pre> 一致。

New linesSpaces and tabsText wrapping
normalCollapseCollapseWrap
nowrapCollapseCollapseNo wrap
prePreservePreserveNo wrap
pre-wrapPreservePreserveWrap
pre-linePreserveCollapseWrap
文字换行

word-wrap: normal | break-word

NOTE：允许长单词自动换行。

word-break: normal | break-all | keep-all

NOTE：break-all 单词中的任意字母间都可以换行。

文本装饰

文字阴影

text-shadow:none | <shadow-t># 或 text-shadow:none | [<length>{2,3}&&<color>?]#

  2. p {
  3.   text-shadow: 1px 1px 1px #000,
  4.                3px 3px 5px blue;
  5. }
  • value = The X-coordinate X 轴偏移像素
  • value = The Y-coordinate Y 轴偏移像素
  • value = The blur radius 阴影模糊半径
  • value = The color of the shadow 阴影颜色（默认为文字颜色）
文本装饰（下划线等）

text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

  2. h1.under {
  3.     text-decoration: underline;
  4. }
  5. h1.over {
  6.     text-decoration: overline;
  7. }
  8. p.line {
  9.     text-decoration: line-through;
  10. }
  11. p.blink {
  12.     text-decoration: blink;
  13. }
  14. a.none {
  15.     text-decoration: none;
  16. }
  17. p.underover {
  18.     text-decoration: underline overline;
  19. }

高级设置

省略字符

text-overflow: [ clip | ellipsis | <string> ]{1,2}

  2. /* 常用配合 */
  3. text-overflow: ellipsis;
  4. overflow: hidden; /* 溢出截取 */
  5. white-space: nowrap; /* 禁止换行 */
更换鼠标形状

cursor: [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit

常用属性

cursor: [<uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]

  • <uri> 图片资源地址代替鼠标默认形状
  • <default> 默认光标
  • <none> 隐藏光标
  • <pointer> 手型光标
  • <zoom-in>
  • <zoom-out>
  • <move>
  2. cursor: pointer;
  3. cursor: url(image-name.cur), pointer;
  4. /* 当 uri 失效时或者则会起作用 */
强制继承

inherit 会强制继承父元素的属性值。

  2. font-size: inherit;
  3. font-family: inherit;
  4. font-weight: inherit;
  5. ...
  6. word-wrap: inherit;
  7. work-break: inherit
  8. text-showdow: inherit

NOTE：具体在使用时可查询文档