css 字体样式设置
css字体样式(Font Style),属性
时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人
css文本样式
序号 | 中文说明 | 标记语法 |
1 | 字体样式 | {font:font-style font-variant font-weight font-size font-family} |
2 | 字体类型 | {font-family:"字体1","字体2","字体3",...} |
3 | 字体大小 | {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small} |
4 | 字体风格 | {font-style:inherit|italic|normal|oblique} |
5 | 字体粗细 | {font-weight:100-900|bold|bolder|lighter|normal;} |
6 | 字体颜色 | {color:数值;} |
7 | 阴影颜色 | {text-shadow:16位色值} |
8 | 字体行高 | {line-height:数值|inherit|normal;} |
9 | 字 间 距 | {letter-spacing:数值|inherit|normal} |
10 | 单词间距 | {word-spacing:数值|inherit|normal} |
11 | 字体变形 | {font-variant:inherit|normal|small-cps } |
12 | 英文转换 | {text-transform:inherit|none|capitalize|uppercase|lowercase} |
13 | ? | {font-size-adjust:inherit|none} |
14 | ? | {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider} |
1. 字体样式:font
语法:{font:font-style font-variant font-weight font-size font-family}
[ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体类形>
作用:简写属性,提供了对字体所有属性进行设置的快捷方法。
注意:字体样式用作不同字体属性的略写,特别是行高。例如 P { font: italic bold 12pt/14pt Times, serif }指定该段为bold(粗体)和italic(斜体)Times或serif字体,12点大小,行高为14点。
例子:字体字体
2. 字体类形:font-family
语法:{font-family:字体1,字体2,字体3,...}
作用:调用客户端字体
说明:
·当指定多种字体时,用","分隔每种字体名称。
·当字体名称包含两个以上分开的单词时,用""把该字体名称括起来。
·当样式规则外已经有""时,用''代替""。
注意:如果在font-family后加上多种字体的名称,浏览器会按字体名称的顺序逐一在用户的计算机里寻找已经安装的字体,一旦遇到与要求的相匹配的字体,就按这种字体显示网页内容,并停止搜索;如果不匹配就继续搜索,直到找到为止,万一样式表里的所有字体都没有安装的话,浏览器就会用自己默认的字体来替代显示网页的内容。
例子:{font-family:黑体,隶书;} 字体类型
3.字体大小:font-size
语法:{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
作用:设定文字大小
说明:使用比例关系
·xx-small
·x-small
·small
·medium
·large
·x-large
·xx-large
例子:{font-size:18pt;} 字体大小
4. 字体风格:font-style
语法:{font-style:inherit|italic|normal|oblique}
作用:使文本显示为扁斜体或斜体等表示强调
说明:
·inherit 继承
·italic 斜体
·normal 正常
·oblique 偏斜体
5.字体粗细:font-weight
语法:{font-weight:100-900|bold|bolder|lighter|normal;}
作用:设定文字的粗细
说明:
·bold 粗体(相当于数值700 )
·bolder 特粗体
·lighter 细体
·normal 正常体(相当于数值400)
注意:取值范围从数字100~900,浏览器默认的字体粗细为400。另外可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗些。
6. 字体颜色:color
语法:{color: 数值}
作用:字体颜色
说明:颜色参数取值范围
·以RGB值表示
·以16进制(hex)的色彩值表示
·以默认颜色的英文名称表示
注意:以默认颜色的英文名称表示无疑是最为方便的,但由于预定义的颜色种类太少,所以更多的网页设计者喜欢用RGB的方式。RGB方式的好处很多,不但可以用数字的形式精确地表示颜色,而且也是很多图像制作软件(如Photoshop)里默认使用的规范,这样一来就为图片和网页更好地结合打下了坚实的基础。
7. 文字阴影颜色:text-shadow
语法:{text-shadow:16位色值}
说明:好像不起作用?
例子:中国中国
8. 字体行高
语法:{line-height:数值|inherit|normal}
作用:行与行之间的距离
说明:取值范围
·不带单位的数字:以1为基数,相当于比例关系的100%
·带长度单位的数字:以具体的单位为准
·比例关系
注意:行距是指上下两行基准线之间的垂直距离。一般地说,英文五线格练习本,从上往下数的第三条横线就是计算机所认为的该行的基准线。如果文字字体很大,而行距相对较小的话,可能会发生上下两行文字互相重叠的现象。
9. 字 间 距:letter-spacing
语法:{letter-spacing:数值|inherit|normal} 作用:控制文本元素字母间的间距,所设置的距离适用于整个元素。 注意:数值 - 设置字间距长度,正值表示加进父元素中继承的正常长度,负值则減去正常长度。在数字后指定度量单位:ex(小写字母x的高度), em(大写字母M的宽度)。
例子: 中国china 中国china
10. 单词间距:word-spacing
语法:{word-spacing:数值|inherit|normal}
说明:单词间距指的是英文每个单词之间的距离,不包括中文文字。间隔距离的取值:points、em、pixes、in、cm、mm、pc、ex、normal等。
11. 字体变形:font-variant
语法:{font-variant:inherit|normal|small-cps
作用:用于正常和小型大写字母间切换(比正常大写字母略小)
说明:small-caps 小型大写字母
12. 字母大小写转换:text-transform
语法:{text-transform:inherit|none|capitalize|uppercase|lowercase}
作用:设置一个或几个字母的大小写标准。
说明:
·none 不改变文本的大写小写。
·capitalize 元素中毎个单词的第一个字母用大写。
·uppercase 将所有文本设置为大写。
·lowercase 将所有文本设置为小写。
例子: CHINA ABCD CHINA ABCD
13. font-size-adjust
语法:{font-size-adjust:inherit|none}
定义用法:font-size-adjust 属性为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。
说明:字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时,那么当此字体被设置为很小的尺寸时会更易阅读。举例:Verdana 的 aspect 值是 0.58(意味着当字体尺寸为 100px 时,它的 x-height 是 58px )。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读。
14. font-stretch
语法:{font-stretch:condensed | expanded | extra-condensed | extra-expanded | inherit | narrower | normal |
semi-condensed | semi-expanded | ultra-condensed | ultra-expanded | wider}
定义用法:font-stretch 属性可对当前的 font-family 进行伸缩变形。
所有主流浏览器都不支持 font-stretch 属性。
转载于:https://www.cnblogs.com/wangjian8888/p/6092146.html
css 字体样式设置相关推荐
- php如何导入字体样式,css怎么引入外部字体?css 字体样式设置的方法(实例)...
在浏览器显示中,页面上不同的字体样式,不仅提升了页面的美观度,也提升了用户的浏览交互性.那么这些不同的字体样式是怎么用css设置的?本章就给大家带来css如何引入外部字体?css 字体样式设置的方法( ...
- css 字体样式设置大全
css样式大全(整理版) 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {fo ...
- css设置字体大小会受分辨影响吗,CSS字体大小设置时的参考(转)
font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们是浏览器预定义设置的.给元素指定了绝对关键字font-size的时候,该元素就不会继承父元素的字体大小 font-s ...
- CSS基础——CSS字体样式属性【学习笔记】
CSS字体样式属性调试工具 font字体 CSS外观属性 快捷操作emmet语法 练习案例-体育页面 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字号 p ...
- html中样式属性有哪些,css字体样式属性有哪些?
css字体样式属性有:1.font-size:字号大小.2.font-family:规定元素的字体系列.3.font-weight:字体粗细.4.font-style:字体风格.5.font:综合设置 ...
- HTML5常用的文本标签及css字体样式属性
HTML5常用的文本标签 标签 描述 标题标签 HTML中一共有六级标题,标题按字号大小从大到小为H1.H2.H3.H4.H5.H6 <p> 用于定义HTML中的段落 <br> ...
- HTML与CSS——CSS字体样式
HTML与CSS--CSS字体样式 字体样式 CSS 提供了很多属性来控制字体的外观. 常用属性有: font-size:设置字体大小. font-family:设置字体类型. font-weight ...
- CSS字体样式属性(font-size、font-family、Unicode、font-weight、font-style、font)
CSS字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度 ...
- 最详细的CSS字体样式总结(font-family、font-size、font-weight、font-style等)
文章目录 前言 一.字体系列 二.字体大小 三.字体粗细 四.字体样式 五.字体复合属性写法 总结 前言 由于自己在学习CSS的过程中会时不时忘记一些CSS字体样式的书写,因此在本文记录了一些常用的C ...
最新文章
- chapter2 机器学习之KNN(k-nearest neighbor algorithm)--K近邻算法从原理到实现
- 探讨计算机房的防火安全
- 数据分析如何用好高可用?Naming双活必须掌握!
- 喜讯丨神策数据四大客户案例斩获大数据“星河”案例
- OpenCV Sobel Derivatives衍生物
- web前端网页设计作业_网页前端设计快速入门技巧
- Semantic Element
- php队列失败是指什么,队列是什么意思
- CFD分析过程(CFD Analysis Process)
- HttpURLConnection中connection.getInputStream()报异常FileNotFoundException
- 《恋上数据结构第1季》B树
- iis7mysql 链接不上_Win7 64位IIS7出现数据库链接出错的解决办法
- guava 工具类及代码
- 系统日常维护(电脑系统)
- 跟同事聊工作,不要用哦,可以用收到、明白、好、知道等词代替
- 美赛数模论文之假设写作
- 20种简单美化照片PS技术
- 025 导数的四则求导法则之u+v、uv、u/v求导
- 价格术语trade term (price term)
- 专为多设备、多分辨率应用而设计