【css技术指南笔记】 第四章 字体 文本
博客专区 > 郑二 的博客 > 博客详情
【css技术指南笔记】 第四章 字体 文本
郑二 发表于3年前
【css技术指南笔记】 第四章 字体 文本
  • 发表于 3年前
  • 阅读 29
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

摘要: 字体

通用字体 font-family

  • serif 衬线字体,在字符笔画的末端会有装饰线

  • san-serif 无衬线字体,笔画末端没有装饰线

  • monospace 等宽字体,每个字符的宽带相等

  • cursive 草书体或手写体

  • fantasy 其他字体,奇形怪状的字体

字体大小 font-size

  • CSS3 新增了一个rem(root em),相对单位,与 em 的区别是:rem 是相对于 HTML 的根元素进行字体大小计算的,em 是根据父元素计算

字体样式 font-style

  • italic / oblique 斜体,在英文中表示强调

  • normal 正常

字体粗细 font-weight

  • bold 粗体

  • normal 正常

字体变化 font-variant

  • normal

  • small-caps 小写字母变大写

简写 font

{font:bold italic small-caps .9em helvetical, arial, sana-serif} 粗、斜体、大写 .9em大小 最后指定三个字体

规则:

  • 必须声明 font-size 和 font-famliy

  • 声明顺便必须如下,大致思想是,首先设定文字的风格、大小,最后是字体

    • font-weight  font-style  font-variant 找三个间不分先后

    • font-size

    • font-family

文本属性

  • 文本缩进 {text-indent:1em} //该属性具有遗传性;1em 为字体宽度,字体不同宽度不同,注意:汉字一个为两个字符;可以设置负值

  • 字符间距 {letter-spacing:.2em} em 为字体宽度

  • 单词间距 {word-spacing:.2em} 调整单词间的距离,对于中、英文来说,都是一样标准:以空格分隔一个单词

  • 文本装饰 {text-decoration:none;}

    • underline:下划线

    • overline:上划线,在文字的上方有条线

    • line-through:划去线,文字中间穿过一条线

    • blink:给文字添加闪动效果(尝试无效果—_—)

  • 文本对齐 {text-align:right;}

    • left、right

    • center 可以使用这个属性来矩阵固定宽度的图片和元素

    • justify 两端对齐,保证两端都有字符,然后平均分布

  • 垂直对齐 {vertical-align:60%;}


  • 行高 {line-height:1.5} 字体大小的1.5倍

    • 简写为 {font:1.2em/1.5 helvetica, arial, sans-serif} //字体为1.2em,行高则是1.2em*1.5

  • 文本转换 {text-transform:none}

    • capitalize 每个单词首字母大小 This Is 

    • uppercase 全大写

    • lowercase 全小写

  • 垂直对齐 {vertical-align:60%},用来实现 H2O 的效果,元素必须为 dispaly:inline

    • 默认的有sub(下标),super(上标),top(元素的顶部与其他的元旦顶部对齐),middle(元素中心与其他元素中间对齐),bottom

    • {vertical-align:-.5em} 下标,往下移动.5个字的宽度

    • {vertical-align:.5em} 上标,往上移动.5个字的宽度

  • {word-wrap:break-word} 在超长单词破坏布局的情况下,讲单词分两行显示(同样适用于长URL)









  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 18
码字总数 4318
×
郑二
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: