[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";
    
    }
    

你可能感兴趣的:(css)