css3笔记02--文本与字体

发表于 | 分类于 ， ， | 本文总阅读量 次
字数统计: 1.2k | 阅读时长 ≈ 4

CSS3–文本与字体

text-shadow

参数说明：text-shadow：Xpx Ypx opaciety color
分别表示为：水平方向相对于字体本身偏移的距离，在垂直方向上相对于字体本身偏移的距离，以及阴影模糊作用域的距离（默认为0，没有阴影效果），颜色
X、Y可以为负值，就相当于，水平方向向左偏移，垂直方向向上偏移。

文字的描边效果

可以利用text-shadow的属性，同时在上、下、左、右四个方向为文字设置多个阴影， 且不设置模糊作用距离（取默认值）。就可以实现描边效果。

1
2
3
4
text-shadow：-1px 0 #333，/*向左偏移*/
             1px 0 #333，/*向右偏移*/
             0 1px #333，/*向下偏移*/
             0 -1px #333；/*向上偏移*/

在四个方向上可以分别设置1个像素的阴影，且没有模糊效果，组合起来就是描边效果了。

文本的发光效果

可以利用text-shadow属性的特性，不设置水平和垂直的偏移距离，仅设置模糊作用距离，这样就可以通过修改模糊值来实现强度不同的发光效果了。

1
text-shadow：0 0 10px #fff；/*没有偏移的模糊设置*/

在水平和垂直方向上的偏移距离为0，只设置模糊效果，加上深灰色背景的衬托，就有了发光的效果了。

需要考虑兼容性的问题：

1
2
3
-webkit-text-shadow：Xpx Ypx opaciety color；
-moz-text-shadow：Xpx Ypx opaciety color；
text-shadow：Xpx Ypx opaciety color；

text-overflow

1
text-overflow：clip ellipsis elipsis-word

说明：clip：标识直接裁切溢出的文本；ellpsis标识文本溢出时，显示省略标记（…），省略标记代表最后一个字符；elipsis-word表示文本溢出时候，显示省略标记（…），和ellipsis不同的是，省略标记代替的是最后一个字符。

溢出文本省略标记

1
2
3
overflow：hidden；/*溢出内容设置为隐藏*/
white-space：nowrap；/*强制文本单行显示*/
text-overflow：ellipsis；/*设置溢出文本为省略标记*/

word-wrap、word-break

边界换行word-wrap

设置或检索单枪行超过指定容器的边界时候，是否断开换行。

1
2
3
word-wrap：normal|break-word；
normal：连续文本换行，是默认值，允许内容超出边界。
break-word：内容将在边界内换行，如果需要，词内换行也会发生

词内换行word-break

设置或检索对象内文本的字内换行行为，尤其在出现多种语言时，对于中文应该使用word-break。

1
2
3
4
word-break：normal|break-all|keep-all
normal：允许在字内换行；
break-all：允许非亚洲语言文本的任意字内断开，该值适合包含一些非亚洲文本的亚洲文本；
keep-all：对于中文、韩文、日文不允许字断开，适合包含少量亚洲文本的非亚洲文本。

@font-face

通过@font-face规则来引用互联网任一服务器中存在的字体。让客户端显示客户端没有安装的字体。

1
@font-face：{属性：取值；}

属性及取值如下：

1
2
3
4
5
6
7
8
font-family：设置文本的字体名称
font-style：设置文本样式
font-variant：设置文本是否为小型大写字母，字母大小写
font-weight：设置字体粗细
font-strentch：设置文本是否为横向的拉伸变形
font-size：设置文本字体大小
src：设置自定义字体的相对路径或者绝对路径，可以包含format信息，此属性只能在@font-face里面使用
src是必要的属性，其他的可以选择使用

例如：

1
2
3
4
@font-face{
	font-family：myfont；/*自定义字体名称*/
	src：url（../font）format（“tyurtypr”）；/*指定字体路径*/
}

引用的时候

1
2
3
4
p{
	font：myfont；

}

注意：通过@font-face规则使用服务器字体，不建议 应用与中文网站，因为中文的字体文件都是几MB到十几MB，大文件会影响网页的加载速度，如果是少量特殊字体，可以用图片来代替。而英文字体的文件只有几十KB，非常适合用@font-face规则。
如果客户端安装的字体吩咐，包含了服务端提供的字体，处于性能的考虑，我们会尽可能的选择客户端的字体，避免字体文件的网络传输中造成的性能损失。可以将规则中src属性的值通过“local（）”来指定本地系统的字体。利用src属性可以同时指定多个地址的特性。比如：

1
2
3
4
5
@font-face{
	font-family：myfont；/*自定义字体名称*/
	src：local（“hemi”）；/*指向客户端本地系统字体*/
	    url（../font）format（“tyurtypr”）；/*指定服务器端字体路径*/
}

当客户端存在相应字体时，就显示客户端的字体，当客户端不存在改字体时候，就显示服务器端提供的字体。

-------------本文结束感谢您的阅读-------------