课程目录

CSS字体

阅读: 4291    发布时间: 2018-01-11 15:37:49

font-family 字体

  • 使用font-family来定义文本的字体系列

  • 可设置多个字体，逗号隔开，默认使用第一个字体，如果用户访问网页的设备上没有第一种字体，则选择第二种，依次类推，如果都没有，使用浏览器默认字体

  • 字体名称带空格的，要将字体名称用引号引起来

body{
    font-family:"Hiragino Sans GB","Microsoft Yahei",SimSun,Arial,"Helvetica Neue",Helvetica;
}


font-style字体样式


font-style有四种值，如下

  • normal - 文本正常显示

  • italic - 文本斜体显示

  • oblique - 文本倾斜显示

  • inherit－继承父级样式，默认都是继承，一般不用

body{
    font-size: 80px;
}
.normal{
    font-style: normal;
}
.italic{
    font-style: italic;
}
.oblique{
    font-style: oblique;
}
.inherit{
    font-style: inherit;
}

尝试一下》


注：由于浏览器中可能没有倾斜的字体，所以oblique和italic可能显示的效果一样


font-size字体大小

font-size 值可以是绝对或相对值。


绝对值：

  • 将文本设置为指定的大小

  • 不允许用户在所有浏览器中改变文本大小（不利于可用性）

  • 绝对大小在确定了输出的物理尺寸时很有用


相对大小：

  • 相对于周围的元素来设置大小

  • 允许用户在浏览器改变文本大小


使用像素来设置字体大小

通过像素设置文本大小，可以对文本大小进行完全控制，无论在什么设备上，都显示16像素大小 

p{
    font-size: 16px;
}

注：浏览器一般最小字体为12px，设置小于12px也没有效果


使用em来设置字体大小

  • em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

  • 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

  • em的值并不是固定的;

  • em会继承父级元素的字体大小。


如下所示，浏览器默认字体大小为16px，.article设置字体1.2em，即1.2*16px=19px；article的子元素.title也设置为1.2em，.title大小为1.2*19px=23px 

<style>
   .article{
       font-size: 1.2em;
   }

   .article .title{
       font-size: 1.2em;
   }
</style>
<div class="article">
    <p>article内的文字大小</p>
    <p style="font-size: 19px">article内的文字大小</p>
    <p class="title">父级元素的1.2倍大小</p>
    <p style="font-size: 23px">父级元素的1.2倍大小</p>
</div>

    

尝试一下》      


使用百分比来设置字体大小

  • 百分比同样是相对父元素大小的 

.article{
    font-size: 120%;
}

.article .title{
    font-size: 120%;
}

<div class="article">
    <p>article内的文字大小</p>
    <p style="font-size: 19px">article内的文字大小</p>
    <p class="title">父级元素的1.2倍大小</p>
    <p style="font-size: 23px">父级元素的1.2倍大小</p>
</div>

尝试一下》


使用rem来设置字体大小

  • em是相对于父元素大小的，而rem是相对于html根元素的

  • html的font-size改变之后，整个页面大小都会改变

 html{
     font-size: 20px;
 }
.article{
    font-size: 1.2rem;
}

.article .title{
    font-size:1.2rem;
}

尝试一下》


font-weight字体大小

  • 取值：100-900，normal、bold、bolder、lighter


关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。 

<p>普通粗细</p>
<p style="font-weight: 900">看我粗吗</p>
<p style="font-weight: bold">看我粗吗</p>

尝试一下》




← CSS伪元素

-END-