丸子学CSS（学习15分钟 - 让网页的文字更漂亮）

使用web Font 与@font-face属性改变网页文字

在css3中，新增了web-Fonts功能，使用这个功能能使用服务器端字体，只要服务器安装此字体，网页就能正常浏览。在css3 中可以使用@font-face来利用服务器端属性

• @font-face{ font-family:webFont; src:url(服务器端字体的字体文件所在路径)format(声明字体文间的格式)}
• @font-face也能显示客户端字体
• @font-face的属性值有font-style，font-variant，font-weight，font-strech，font-size，src。
  修改字体种类而保持字体大小不变的——font-size-adjust属性
  font-size-adjust：aspect值；每一个字体的aspect的值不同

使用方法：

1）导入字体（这里使用的是本地加载文件）

/* 加载字体 */
@font-face {
    font-family: AngelicWar;
    src: url('./font/bb417/AngelicWar.ttf');
}
@font-face {
    font-family: HeroPark;
    src: url('./font/font1297/nice.woff2');
}

2) 使用字体

<div class="case case01">
    Rain continuous love Yiyi, how many stories in the heart, May rain sing Yangzhou
</div>
<div class="case case02">
    我嫌弃你的偏向，会让我觉得有点丧，避开你流露出的锋芒，别跟我斤斤计较
</div>

.case01 {
    font-family: AngelicWar;
}
.case02 {
    font-family: HeroPark;
}

效果