CSS网页布局中字体样式
在网页制作时,我们需要控制网页中字体的大小,颜色,粗细等,通过情况下,我们会使用以下的CSS样式去控制这个字体的样式:
字体的大小:font-size:14px;
字体的颜色:color:#FFF;
字体的粗细:font-weight:bold;
通过以上的单独的样式去控制网页字体,但是这样书写比较麻烦,特别是自适应网页,所以我们可以用以下的综合样式书写来控制网页字体的样式:
font:italic bold 23px/46px "SimHei";//字体的粗细,字体的大小,字的行高,字体。
除此之外,我们在完成了ps网页切片之后,还可以用以下的字体样式来控制HTML网页中的字体。(相关知识:什么是html)
- font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
- normal 默认值。浏览器会显示一个标准的字体。
- small-caps 浏览器会显示小型大写字母的字体。
- inherit 规定应该从父元素继承 font-variant 属性的值。
- letter-spacing 字体间的距离
- text-transform none 默认值 不变text-transform uppercase 文本全大写text-transform lowercase 文本全小写
- text-transform 每个单词首字母大写
- word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
- word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:
- white-space 值为normal时 去除空白字符
- white-space 属性设置为 pre 时,浏览器不会合并空白符,也不会忽略换行符 ,与之相对的值是 nowrap,它会防止元素中的文本换行,除非使用了一个 Br换行元素标签。在 CSS 中使用 nowrap 特别类似于 HTML 4 中用
- 将一个表单元格设置为不能换行,不过 white-space 值可以应用到任意元素。
- 当 white-space 属性设置为 pre-wrap 时,浏览器不仅会保留空白符并保留换行符,还允许自动换行。