秦小

CSSMM4E 笔记 - 2.06 - 格式化文本

发表于 | 分类于

速记法字体(Shorthand Font)

font: style variant weight size/line-height family

最后两个必须是font-size[/line-height] 和font-family, 其他属性可以任意顺序.

1
font: italic bold small-caps 18px/1.5 Arial, Helvetica, sans-serif;

使用常用字体

Serif Fonts Sans-Serif Fonts Monospace and Fun Fonts
“Times New Roman”, Times, serif Arial, Helvetica, sans-serif “Courier New”, Courier, monospace
Georgia, “Times New Roman”, Times, serif Verdana, Arial, Helvetica, sans-serif “Lucida Console”, Monaco, monospace
Baskerville, “Palatino Linotype”, Times, serif Geneva, Arial, Helvetica, sans-serif “Copperplate Light”, “Copperplate Gothic Light”, serif
“Hoefler Text”, Garamond, Times, serif Tahoma, “Lucida Grande”, Arial, sans-serif “Marker Felt”, “Comic Sans MS”, fantasy
“Century Gothic”, “Gill Sans”, Arial, sans-serif

使用Web字体

字体文件格式(Types):

  • EOT Embedded OpenType .eot
  • TrueType, OpenType .ttf .otf
  • WOFF Web Open Font Format .woff
  • SVG Scalable Vector Graphic .svg

寻找Web字体

生成多种字体格式

using https://www.fontsquirrel.com/tools/webfont-generator

Web字体使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@font-face {
    font-family: 'League Gothic';
    src: url('fonts/League_Gothic-webfont.eot');
    src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded- opentype'),
         url('fonts/League_Gothic-webfont.woff2') format('woff2'),
         url('fonts/League_Gothic-webfont.woff') format('woff'),
         url('fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('fonts/League_Gothic-webfont.svg') format('svg');
}
h1 {
  font-family: 'League Gothic';
  font-weight: normal;
}

处理Bold和Italic字体变体(Variants)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@font-face {
  font-family: 'PTSans';
  src: url('PTSansRegular.woff2') format('woff2'),
      url('PTSansRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'PTSans';
  src: url('PTSansItalic.woff2') format('woff2'),
      url('PTSansItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'PTSans';
  src: url('PTSansBold.woff2') format('woff2'),
      url('PTSansBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'PTSans';
  src: url('PTSansBoldItalic.woff2') format('woff2'),
      url('PTSansBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

发现Google Web字体

给文点颜色看看

色彩的表示方法(Representation):

  • Hexadecimal Color Nation #0066FF
  • RGB / RGBA rgb(100%, 100%, 100%); rgb(255,255,255); rgba(255, 100, 50, .5)
  • HSL / HSLA hsl(0-360, 100%, 50%), hsla(0-360, 50%, 70%, .5)
    H: Hue色相
    S: Saturation 饱合度, 纯度
    L: Lightness 高度
    色相: 红, 橙, 黄, 绿, 青, 蓝, 紫: 0-51-102-153-204-255-306-357; 相差约51.

改变字体大小

1
2
3
4
5
6
7
* {
  font-size: 1em;
  font-size: 1rem;
  font-size: 200%;
  font-size: 36px;
  font-size: xx-small, x-small, small, medium, large, x-large, xx-large;
}

% 和 em 本质上是一样的, 是相对浏览器默认的字体大小(16px)来计算的, 它们在嵌套的中会通过继承积累效果.
rem (Root em) 与em 相似, 它总是相对根元素(html)来设定字体大小.

格式化单词和字母

  • 斜体Italiczing
  • 粗体Bolding
  • Capitalizing - SMALL CAPS
  • 装饰Decorating
  • 单词、字母间距Letter/word Spacing
1
2
3
4
5
6
7
8
9
10
{
    font-style:italic | normal;
    font-weight: bold | normal;
    font-transform: uppercase | lowercase | none;
    font-variant: small-caps;
    text-decoration: underline | overline | line-through | blink | none;
    text-decoration: underline overline;
    letter-spacing: -1px | .7em ...;
    word-spacing: 2px | .5em ...;
}

文本阴影

1
2
3
4
5
{
  text-shadow: -left+right -top+bottom blur color;
  text-shadow: -4px 4px 3px #999999;
  text-shadow: -4px 4px 3px #666, 1px -1px 2px #000;
}

格式化段落

  • 行间距

    1
    2
    3
    4
    5
    {
      line-height: 150%;
      line-height: 1.5em;
      line-height: 1.5;
    }

    1.5em和1.5区别: 1.5总是通过(font-size of current tag) * 1.5来计算的.

  • 对齐

    1
    2
    3
    {
      text-align: left | right | center | justify ;
    }

  • 首行缩进

    1
    2
    3
    {
      text-indent: 25px | 5em | 50%;
    }

    text-indent: 50% 表示indent为containing元素宽度的50%.

  • 段落首字、首行
    1
    2
    3
    4
    {
      p::first-letter {}
      .intro::first-line {}
    }

格式化列表

  • 项目符号种类

    1
    2
    3
    li { 
       list-style-type: squire | disc | circle | decimal | decimal-leading-zero | upper-alpha | lower-alpha | upper-roman | lower-roman | lower-greek | upper-greek .... | none;
    }

  • 项目符号(Bullets and Numbers)的位置

    1
    2
    3
    4
    5
    6
    7
    li {
      list-style-position: inside | outside;
    }
    ul, ol {
      padding-left: 0;
      margin-left: 0;
    }

  • 图形化项目符号(Graphic Bullets)

    1
    2
    3
    li {
      list-style-image: url(images/bullet.gif);
    }

    url 不需要(quotation marks: ‘ “)包裹