text-shadow:length-x,length-y,radius,color
- 设置文字阴影,第三个参数为模糊半径
word-break:normal/keep-all/break-all
- 设置文本自动换行
- 第一个参数表示默认方式,英文在空格或连词符处换行,中文随时换行,单标点不可位于行首
- 第二个参数表示只在半角空格或连词符处换行
- 第三个参数表示强制随时换行
word-warp:normal/break-world
- 表示长单词或URL的换行
- 具体参考上一条
定义服务端字体
基本用法
@font-face{
font-family:WebFont;
src:url('...') format('...');
}
h1{
font-familt:WebFont;
}
- 上面的WebFont用于声明使用服务端字体,src为字体路径,format为字体格式
服务器端字体的粗体与斜体
- 在使用服务器端字体时无法直接通过font-style将字体定义为粗提或斜体必须使用@font-face提前引入,举个栗子
@font-face{
font-family:WebFont;
font-width:bold;
src:url('...') format('...');
}
@font-face{
font-family:WebFont;
font-style:italic;
src:url('...') format('...');
}
@font-face{
font-family:WebFont;
font-width:bold;
font-style:italic;
src:url('...') format('...');
}
- 在引入时会通过字体样式匹配这三种样式
显示本地字体
@font-face{
font-family:Arial;
src:local('...');
}
- 其好处是在渲染界面时会先在本地字体查找,未找到则使用服务端字体
@font-face的属性
属性名 | 说明 | 取值范围 |
---|---|---|
font-family | 设置字体系列 | |
font-style | 设置字体样式 | normal:不使用斜体 italic:使用斜体 oblique:使用倾斜体 inherit:从父元素继承 |
font-variant | 设置字体大小写 | normal:使用浏览器默认值 small-caps:使用小型大写字母 inherit:从父元素继承 |
font-weight | 设置字体的粗细 | normal:使用浏览器默认值 bold:使用粗体字符 bolder:使用更粗的字符 lighter:使用更细的字符 100~900:自己设置值,400等于normal,700等于bold |
font-stretch | 设置字体是否伸缩变形 | 不想写了 |
font-size | 设置字体大小 | |
src | 设置字体路径 |
font-size-adjust
- 由于改变字体会影响字体大小(即使设置大小,也会因字体种类的不同而不一样)
- 我们知道的是每个字体都有一个aspect值为常量,计算方法为x-height/font-size,x-height指该字体写出的小写x的高度。这个方法就是通过微调各个字体的aspect值来达到字体大小一致的目的,至于aspect值,可通过......
百度获得
网友评论