文档章节

【css技术指南笔记】 第四章 字体 文本

郑二
 郑二
发布于 2015/03/27 18:54
字数 642
阅读 29
收藏 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
作品 0
朝阳
程序员
《HTML+CSS3权威指南》笔记摘要 - 目录

主要是想借助这个平台让大家给我学习途中的错误和不好的地方给与纠正。 我会努力最短时间内完成更新,如果发现有错别字或者Code错误,请指出。 信息:建议使用Opera10以上或者Google浏览器测...

Contac
2011/12/02
0
1
前端学习书籍

前端学习书籍 Css 1、CSS时尚编程百例 【内容介绍】 CSS时尚编程百例》超级不错的一本学习CSS的书籍,全部以实例为主讲解如何使用CSS语法、滤镜、高级功能等,百例主要包括最常用的CSS菜单特...

MyDear宸
2017/05/11
0
0
第四章-通过CSS控制字体样式

一.通过CSS控制文本样式: ①设置字体 ②定义行高 {line-height:数值}(例如:{line-height:50px;} ③定义下划线,顶划线,删除线 {text-dec...

湖心亭看雪
2014/10/16
0
0
浅析行内元素视觉格式化

起因 前段时间组内同学在开发运营页的过程中,遇到一个有趣的问题:移动端页面采用 ,图片在垂直方向展示时会出现莫名的间隙(如下图所示)。几位同学纷纷提出不同的解决方案,但为什么会出现...

代码君的自白
2017/11/29
0
0
《Knockout应用开发指南》系列技术文章整理收藏

《Knockout应用开发指南》系列技术文章整理收藏 Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化,Knockout应用开发指南系列整理了Knockout方面的技术文章,供学习...

开元中国2015
2015/06/22
26
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

(一)软件测试专题——之Linux常用命令篇01

本文永久更新地址:https://my.oschina.net/bysu/blog/1931063 【若要到岸,请摇船:开源中国 不最醉不龟归】 Linux的历史之类的很多书籍都习惯把它的今生来世,祖宗十八代都扒出来,美其名曰...

不最醉不龟归
28分钟前
6
0
蚂蚁金服Java开发三面

8月20号晚上8点进行了蚂蚁金服Java开发岗的第三面,下面开始: 自我介绍(要求从实践过程以及技术背景角度着重介绍) 实习经历,说说你在公司实习所做的事情,学到了什么 关于你们的交易平台...

edwardGe
35分钟前
7
0
TypeScript基础入门 - 函数 - this(三)

转载 TypeScript基础入门 - 函数 - this(三) 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.2.4 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能...

durban
45分钟前
0
0
Spark core基础

Spark RDD的五大特性 RDD是由一系列的Partition组成的,如果Spark计算的数据是在HDFS上那么partition个数是与block数一致(大多数情况) RDD是有一系列的依赖关系,有利于Spark计算的容错 RDD中每...

张泽立
52分钟前
0
0
如何搭建Keepalived+Nginx+Tomcat高可用负载均衡架构

一.概述 初期的互联网企业由于业务量较小,所以一般单机部署,实现单点访问即可满足业务的需求,这也是最简单的部署方式,但是随着业务的不断扩大,系统的访问量逐渐的上升,单机部署的模式已...

Java大蜗牛
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部