CSS文字样式


文字大小: |xx-small|x-small|small|medium|large|x-large|xx-lager|

: large small 相对父元素的大或者小

文字字体:

font-family:"宋体","微软雅黑";
//解决多个系统兼容性问题 escape("微软雅黑")
font-family:"%u5FAE%u8F6F%u96C5%u9ED1" == font-family:"微软雅黑"

字体系列

  1. 衬线字体 serif
  2. 无衬线字体 sans-serif
    //一般为了兼容性都要加上当中的一个,避免当前系统没有设置的字体

无衬线字体

字体粗细

font-weight: normal(400) | bold(700) | bolder | lighter |100 ~ 900

字体风格

font-style: normal | italic(斜体,使用斜体样式,字体如果没有斜体样式就正常显示) |oblique(强制斜体)

字间距

letter-specing : 数字可以是负数
text-decoration: none //取消下划线
word-specing : 数字 字间距
//letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白,而word-spacing添加每个单词之间的空白。请大家注意,word-spacing对中文无效。(其实添加空格也可以有效)

行高

行高 == 0.5倍行距 + 文字Top + 文字Bottom + 0.5倍行距 注意有顺序,至上而下的
另一个定义: 两段文字之间 两条基线的距离
1.5em = 1.5 = 150%

文本修饰

text-decoration = none; //删掉修饰
text-decoration=underline //下划线
text-decoration=line-through //删除线
text-decoration: overline//顶线

空白处理

white-space :normal //超过div边界宽度就换行
white-space :nowarp // 只要没遇到换行符,一直往后放
white-space: pre // html原格式显示(计算源代码中的空格和换行)

自动换行

word-break :normal //不打断单词
word-break :break-all; //打断单词
word-break: keep-all // 不允许换行,除了遇到空格,换行

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 11,067评论 2 2
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 6,177评论 1 4
  • 关于颜色的小知识 颜色是通过对红、绿和蓝光的组合来显示的。早期的电脑只支持最多 256 种颜色时,但是现在大多数电...
    Zd_silent阅读 3,693评论 0 0
  • 简单复习一下: Display改变标签显示模式: display可以控制标签的显示模式。 客串一个:visibil...
    显然2017阅读 3,971评论 0 3
  • 想不到再次入陕竟是时 隔六年后 的今天。 又一次被自己给抛上车厢,说是特快,还不就是破破的绿皮 今天是2017年4...
    梳头美容阅读 1,937评论 0 1