css3字体样式

一、font-family的使用
font-family属性可以设置HTML文本的字体样式,
eg.*{
    font-family: Arial,"Microsoft YaHei";
}
注意:当字体名称中包括空格、#、$之类的符号,则使用''
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。
也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可
识别的第一个值。

上面的font-family若系统都无法找到,则会使用系统默认的font-family样式,从而影响了样式显示。你可以设置
服务器端样式,即在服务器中导入字体样式包,然后通过css导入该包,并使font-family引用。
1、字体包的导入
可以从网上下载,也可以使用Windows自带的字体包,在路径C:\Windows\Fonts下,便是大量的字体包,粘贴一份你
想使用的字体包,并将它粘贴到css所在的文件夹,如msyh.ttf(微软雅黑的文件)。
2、css中使用字体包
css引用字体包
@font-face{
    font-family:'abc';
    src:url('msyh.ttf');      //路径
}
css中使用
*{
    font-family:abc;
}

可以使用这种方式使用特殊的英文字体样式,但是由于中文的字体包比较大,所以不建议使用上面的导包方法。

二、text-shadow   [ˈʃædoʊ]    文本添加阴影
eg. p{
    text-shadow:5px 5px 3px black;
}
解释:给文本添加阴影。其中四个值,第一个值:水平偏移;第二个值:垂直偏移;第三个值:阴影模糊度(可选);
第四个值:阴影颜色(可选)。
虽然后两个值是可选,但要写上,否则文本会叠加,非常难看。若果最后的字体颜色不写,那么阴影的颜色便是字体
的颜色。

三、white-space      css2
normal             默认。空白符被压缩,文本自动换行
pre             空白符被保留,遇到换行符(换行符即为【enter】键)则换行。其行为方式类似 HTML 中的 <pre> 标签。
nowrap             空白符被压缩,文本不换行,直到遇到 <br> 标签为止。
pre-wrap     空白符被保留,文本会在排满或遇换行符换行。
pre-line     空白符被压缩,文本会在排满或遇换行符换行。
inherit     规定应该从父元素继承 white-space 属性的值。

word-wrap        让过长的英文单词断开
eg. p{
         word-wrap:break-word;
}
normal           单词不断开
break-word       断开单词
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值