作者:ccM保佑加琳诺爱儿1984f | 来源:互联网 | 2023-08-26 18:03
text-shadow给文字添加阴影用法:text-shadow:lengthlengthlengthcolor前面三个length分别指阴影离开文字的横向距离、
text-shadow 给文字添加阴影
用法:text-shadow: length length length color
前面三个length分别指阴影离开文字的横向距离、阴影离开文字的纵向距离和阴影的模糊半径,color指阴影的颜色(横向距离和纵向距离可以为负数)。
*使用text-shadow还可以给文字指定多个阴影。
让文本自动换行
浏览器本身都自带着让文本自动换行的功能。在浏览器中显示文本的时候,会让文本在浏览器或div元素的右端自动实现换行。对于西方文字来说,浏览器会在半角空格或连字符的地方自动换行,而不会在单词的当中突然换行。对于中文来说,可以在任何一个中文字后面进行换行,当中文中含有标点符号的时候,浏览器总是不可能让标点符号位于一行文字的行首,通常将标点符号以及它前面的一个文字作为一个整体来统一换行。
word-break可以指定自动换行的处理方法。可以让浏览器实现任意位置的换行。
word-break属性可以使用的值:
- normal: 使用浏览器默认换行规则
- keep-all: 只能在半角空格和连字符处换行
- break-all: 允许在单词内换行
让长单词与URL地址自动换行
因为在URL地址中没有半角空格,所以当URL地址中没有连字符的时候,浏览器在显示时是将其视为一个比较长的单词来进行显示的。
在CSS3中,使用word-wrap属性来实现长单词与URL的自动换行。
word-wrap: break-word;
- 使用服务器端字体
在CSS3之前,页面文字所使用的字体必须在客户端中被安装才能正常显示。在CSS3中,使用Web Fonts可以在网页中显示安装在服务器端的字体。
使用方法:在font-family属性值中使用“WebFont”来声明使用服务器端的字体。
@font-face{
font-family: WebFont;
src: url('font/Fontin_Sans_R_45b.otf') format("opentype");
font-weight: normal;
}
- src属性指定服务器端字体的字体文件所在的路径;
- format属性指定字体文件的格式。
到目前为止,可以使用的文件格式为opentype与truetype。opentype格式的文件扩展名为”.otf”,truetype格式的文件扩展名为”.ttf”。
在针对元素使用这个服务器端字体的时候,还需要在元素样式中将font-family属性值指定为WebFont。
例如:
span{
font-family: WebFont;
}
- 另外,在定义字体的时候,可以将字体定义为斜体字或者粗体字。在使用服务端字体的时候,需要根据是斜体还是粗体使用不同的字体文件。
以粗体为例:
@font-face{
font-family: WebFont;
src: url('font/Fontin_Sans_B_45b.otf') format("opentype");
font-weight: normal;
}
span{
font-family: WebFont;
font-style: bold;
}