您现在的位置是:网站首页> 编程资料编程资料
css字体样式(Font Style) 属性
2021-09-06
1163人已围观
简介 这篇文章主要为大家介绍下css下的字体样式,font的属性与写法,需要的朋友可以参考下
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}
作用:控制文本元素字母间的间距,所设置的距离适用于整个元素。
注意:数值 - 设置字间距长度,正值表示加进父元素中继承的正常长度,负值则
相关内容
- 使用css3匹配手机屏幕横竖状态css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- div整体居中其内容不居中的示例代码 设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- CSS常用属性的默认值详细整理CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- div+css纵向导航如何实现且为导航添加超链接设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- div三栏布局左中右通过float浮动来设置设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- div的两列居中放置并对每个div设计css样式设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- 设置一个div层的最小宽度或最小高度CSS控制页面最大最小宽度和高度可兼容IE6版本的实现方法兼容IE6的网页最小最大宽度和最小最大高度css写法CSS的最大高度、最小高度及宽度在IE6下没有效果问题CSS控制div宽度最大宽度/高度和最小宽度/高度的方法
- 让横向排列的几个浮动(float:left)的子div居中显示css实现图片横向排列滚动效果让几个横向排列的浮动子div居中显示的方法CSS的ul和li实现横向排列和去掉li的点HTMl中标签中li横向排列的实现示例
- 让某一个div固定在屏幕中的解决方法让DIV一直固定在屏幕的某个位置示例代码设置一个DIV块固定在屏幕中央的两种方法(推荐)
- 组织结构可以任意拖动到指定位置div设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法