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

作者:日期:2017-01-22 18:31:49 点击:126

 

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>

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

上一篇: CSS选择器详解

下一篇: 常用HTML5体验改进方法