CSS3 字体和CSS3 新增控制字体属性

CSS3 字体

在网页编辑使用字体时，在CSS3出现之前设计师只能使用计算机已安装的字体，而现在CSS3中，当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。 
那么如何使用CSS3字体呢，我们下面一起学习一下。

• 第一步：调用需要的字体

<style>
@font-face{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
</style>

• 第二步：给需要的元素引入这个字体

<style>
/*如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)*/
div{
    font-family:myFirstFont;
}
</style>

前端的小伙伴们，字体需要AI这样的矢量文件制作，所以一般是由咱们伟大的设计师给我们提供这样的文件，我们直接饮用即可，那么由兴趣的同学可以注册一个阿里字体的账号，阿里巴巴矢量图标库，去下载字体并且使用一下哦。

那么这些字体如何控制样式呢？ 
font有哪些属性，font-face就可以直接使用，例如

div{
    font-family:myFirstFont;
    text-shadow:5px 5px 5px red;
    text-align: center;
    font-size:20px;
}

CSS3 新增控制字体属性

text-shadow 文本阴影

<style>
div{
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /*
    第一个值：x轴位置
    第二个值：y轴位置
    第三个值：模糊半径
    第四个值：阴影颜色
    */
}
</style>

Text Overflow 文本溢出属性

<style>
div{
    text-overflow: clip;/*修剪文本(多余文字不显示)*/
    text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本*/
    text-overflow: string;/*使用给定的字符串来代表被修剪的文本*/
}
</style>

word-wrap 属性允许长单词或 URL 地址换行到下一行

<style>
div{
    word-wrap: normal;/*只在允许的断字点换行（浏览器保持默认处理）*/
    word-wrap: break-word;/*在长单词或 URL 地址内部进行换行*/
}
</style>

word-break 单词拆分换行

<style>
div{
    word-break: normal;/*浏览器保持默认处理*/
    word-break: break-all;/*允许在单词内换行*/
    word-break: keep-all;/*只能在半角空格或连字符处换行*/
}
</style>

那还有一些浏览器支持比较少的文字属性，大家可以私下了解一下。