css字体样式(Font Style),属性

时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人
 
css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识。以下是我精心整理的css字体样式属性知识,供大家学习参考:

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 属性。

css 字体样式设置的更多相关文章

  1. css 字体样式设置大全

    css样式大全(整理版)   字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...

  2. 0010 CSS字体样式属性:font-size、font-family、Unicode字体、font-weight、font-style、综合设置、color、 text-align、line-height、text-indent、text-decoration、、、

    CSS字体样式属性.调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 ...

  3. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  4. css字体样式

    css字体样式(Font Style) 属性       css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant font-weight f ...

  5. 2020年12月-第02阶段-前端基础-CSS字体样式

    CSS字体样式属性调试工具 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字 ...

  6. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

  7. CSS字体样式属性

    font-size 字号大小 一般推荐使用相对长度(px ,em),不推荐使用绝对长度(in,cmm,mm,pt) font-family 字体 1.可以同时指定多个字体,中间用英文状态的逗号隔开,英 ...

  8. css字体样式+文本样式

    font-family属性值:具体字体名或者字体集 如果是中文或者有单词之间有空格,需要加双引号 字体集: Serif (有装饰线) Sans-serif (无装饰线) Monospace Cursi ...

  9. 前端 CSS 优先级 样式设置important

    !important 的使用. !important方式来强制让样式生效,但并不推荐使用.因为如果过多的使用!important会使样式文件混乱不易维护. 万不得已可以使用!important 现在选 ...

随机推荐

  1. FPGA基础学习(3) -- 跨时钟域处理方法

    文章主要是基于学习后的总结. 1. 时钟域 假如设计中所有的触发器都使用一个全局网络,比如FPGA的主时钟输入,那么我们说这个设计只有一个时钟域.假如设计有两个输入时钟,如图1所示,一个时钟给接口1使 ...

  2. 栈和递归的关系 144:Binary Tree Preorder Traversal

    前序遍历:根左右 //用栈来实现非递归解法/** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeN ...

  3. .reverse ,join,split区分

    * 1:arrayObject.reverse() * 注意: 该方法会改变原来的数组,而不会创建新的数组. * 2:arrayObject.join() * 注意:join() 方法用于把数组中的所 ...

  4. web服务器架构演化及所其技术知识体系(分布式的由来)

    文章标题是我自己取的,内容来着百度百科k5665219的一篇回答,觉得讲的很不错就转载过来了. 最开始,由于某些想法,于是在互联网上搭建了一个网站,这个时候甚至有可能主机都是租借的,但由于这篇文章我们 ...

  5. QiyeProject SpringMVC 项目 d15866p148.iok.la 主要做主页应用,消息应用不管了 用户微信号有点像乱码的那个是openID 找同伴:在项目的GitHub页面里找提问过的人,还有fork,star的人

    消息型应用支持文本.图片.语音.视频.文件.图文等消息类型. 主页型应用只支持文本消息类型,且文本长度不超过20个字. 填写必要信息 URL /QiyeProject/src/org/oms/qiye ...

  6. 【3dsMax安装失败,如何卸载、安装3dMax 2013?】

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  7. git命令(转载学习)

    Git使用教程 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是 ...

  8. TOJ 3651 确定比赛名次

    描述 有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后依次排 名,但现在裁判委员会不能直接获得每个队的比赛成绩 ...

  9. C#中三个关键字params,Ref,out

    关于这三个关键字之前可以研究一下原本的一些操作 using System; using System.Collections.Generic; using System.Text; namespace ...

  10. 1、块:ion-item

    因为ion-item 一般写于ion-list里 所以在ion-list里面我会仔细讲解. 1. ion-badge /* --- page1.html ---*/ <ion-navbar *n ...