07字体样式细讲

07字体样式细讲

​ 学会文字可以精美排版

​

字体样式细讲(关于设计与使用中的细节)

• font类---字体相关属性

  • font-family 字体样式

    • 微软雅黑

  • font-size 字体大小

    • px

      • 系统默认字体大小16px

      • 设计默认规范大小12px(body里面看到文字条件反射的加上相应规范)

    • %(百分比)...这样设置大小,目的是为了明确与基准字大小的区别!!也有利于后期字体的改动!!

    • em相对字体大小

      • 意义是用于h1~h6的字体大小(因为标题类大小永远与默认字体等比例的!!)

  • font-weight 字体粗细

    • 100~900

    • 400(正常大小)

    • 700(等同于粗体)

• text类

  • text-decoration 字体装饰

    • underline

    • overline

    • line-through

    • blink(没有实现?)

  • text-transform 英文大小写转换

    • none

    • capitalize

    • uppercase

  • text-indent

      p{text-indent:2em}
      /*这里自动给文档进行首行缩进*/
      /*用户只负责想要输入的,其余样式自动交给html自动实现*/

  • text-align

    • left

    • right

    • center

    • justify 公平,每个字都能分到一定的地盘.有意思

• 杂类

  • letter spacing 与 word spacing

    • 从英文的角度就好理角,这里的word相当于中文的一个词组,letter相当于一个中文的汉字

  • line-height

    •   
        这里字体的默认大小是16px，line-height为2那么就是32px,多出来的   
            16px怎么会在文本的上下各填充8px。

相对单位em与h1标签,h2标签

字体大小的原理机制(默认大小,绝对大小,相对大小)

标准默认字规范

  
  body{font-size:20px}

当如此设置时,默认字体大小20px,且将em定义为20px,h1=2em=40px;

  
  body{font-size:12px}

这时标准设计的大小,以些为单位,默认字体大小12px,h1=2em=24px;也就是此时的h1的字体大小变为24