[HeadFirst-HTMLCSS学习笔记][第八章扩大你的词汇量]

字体

• font-family，可指定多个候选

  body{
      font-family:Verdana,Geneva,Arial,sans-serif;
  }
  

• font-size 字体大小

  body{
      font-family: sans-serif;
      font-size: 14px;
  }
  h1{
      font-size: 150%;
  }
  h2{
      font-size: 1.2em;
  }
  p{
      font-size: 100%;
  }
  

  关键词

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

  秘诀：设置body为medium或者small(正文大小)，其余按比例

• color 文本颜色

  body{
      color:silver;
  }
  还能
  body{
      color:rgb(80%,40%，0%);
  
  }
  还能
  body{
      color:rgb(204,102,0);
  }
  或者16进制
  

• font-weight 字体粗细

  body{
      font-weight:bold;
  }
  

  关键词

  • lighter
  • normal
  • weight

• font-style 字体风格

  body{
      font-style:italic;
  }
  

  关键词

  • italic 斜体
  • oblicque 倾斜

• text-decoration 文本装饰，下划线，上划线，删除线

  body{
      text-decoration: underline;
  }
  

  关键词(可叠加)

  • underline 下划线
  • line-through 删除线
  • overline 上划线
  • none 什么都没有

web字体

• .ttf
• .otf ttf的更新
• .eot 仅IE支持
• .svg

• .woff 当前要支持的标准

  @font-face{
      font-family: "Emblema One"; /*给字体取名字*/
      src:url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
          url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
  }
  body{
      font-family: "Emblema One";
  
  }