css中字体样式有哪些,css中字体样式有哪些
请问,css中的font style,一共有多少种样式?
你好,font-style有以下四种值
公司主营业务:成都网站设计、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出阳东免费做网站回馈大家。
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
使用css设置文本的字体通过什么属性
html的字体样式主要通过css的font-size以及font-family来定义的,标签详解如下:
font-size
指定字体大小,常用单位有em和px
font-family
指定使用的字体
常用的中文字体有微软雅黑和宋体,英文字体有Arial
可以同时指定多个字体,使用英文的逗号分隔,浏览器会按顺序查找,找不到就找下一个,全部没找到就使用系统默认的
字体用中文表示 则需要用双引号或者单引号分隔,英文字体一般不需要用引号,但是如果 有特殊字符的(如空格,反斜杠,#,$等)也需要使用引号
font-weight
字体粗细(bold相等于设置该属性的值为700,normal相等于设置该属性值为400–不用单位,建议使用数字因为解析会更快)
fon-style
normal(一般用于让斜体不倾斜,em标签有加重强调的语义 但是字体会倾斜,可以为em 标签设置 font-style 属性值为 normal 取消其倾斜的效果)
字体样式可以连写
即 所有的字体样式 使用一个语句,但是有一定的语法规则和顺序
选择器 { font : font-style font-weight font-size/line-height font-family; }
字体样式连写时需要注意:一定要按顺序写,可以有省略不写的样式但是一定要按顺序,而且font-size和font-family是不可以省略的,否则会不起作用
文本外观样式
color:字体颜色
预定义的颜色如green,red等
十六进制,顺序是红绿蓝,十六进制是最常用的颜色表示方式
#ff0000 表示红色,等同于#f00(缩写,必须是两两相同的才可以进行缩写);#00f表示蓝色;#0f0表示绿色;#fff表示白色(所有的颜色都满格),#000000即#000表示黑色(所有的颜色都没有)
RGB代码:rgb(255,255,255)表示白色
文本修饰:text-decoration:none、underlined(比较常用,用于添加下划线和取消下划线)
line-hight:行间距,一般情况下,行间距只需要比字体大小大7或8个像素就可以了
text-align:文本内容的水平对齐方式
text-indent:段落首行缩进,单位使用em,1em就是一个字,所以该样式值为2em 表示 段落首行缩进两个字符
去哪儿网CSS样式详解
CSS样式详解
字体样式(font)
字体
font-family:字体名
font-family:字体名1,字体名2...
font-family: fantasy | monospace | ncursive | serif | sans-serif
字体系列
cursive:模拟手写的字体,通常这类字体的曲线比较明显。
monospace:无比例的字体。通常用于模拟打字机中打出来的文字,也就是等宽字体。
serif:有比例有衬线的字体,这种字体中的所有字母都根据不同需要占有不同的宽度,有衬线是指在字母上做装饰的细线。
sans-serif:有比例无衬线的字体,这种字体中的所有字母都根据不同需要占有不同的宽度。
文字大小
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | 长度 | 百分比
xx-small:文字显示为最小(绝对);
x-small:文字显示为较小(绝对);
small:文字显示为小(绝对);
medium:默认值(绝对)
large:文字显示为大(绝对);
x-large:文字显示为较大(绝对);
xx-large:文字显示为最大(绝对);
larger:增大(相对);
smaller:减小(相对);
长度:数值加上单位;
百分比:相对字体大小。
文字大小调整
在英文方面,一段文字看上去是否舒服,很大程度上取决于当前字体的高度与这种字体的小写x字母高度的比值,这个比值称为字体的面值。
font-size-adjust: none | number
none:不改变文字大小;
number:强制文字使用面值。
粗体
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
normal:默认值(400),正常粗细;
bold:加粗(700);
bolder:比normal粗,比bold细;
lighter:不比normal粗;
x00:分9个级别,数值越大越粗。
斜体
font-style: normal | italic | bolique
normal:默认值,代表正常的字体;
italic:斜体;
bolique:倾斜的字体。
文字变形-小型大写字母
fontvariant: normal | small-caps
normal:默认值;
small-caps:小型大写字母
小型大写字母指将字母更改为大写字母,并且该大写字母比通常的大写字母要小。
文字变形-文字拉伸
font-stretch: normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
normal:默认值,不拉伸变形;
narrower:水平方向变窄;
wider:水平方向变宽;
condensed:压缩文字;
extra-condensed:压缩得很小;
ultra-condensed:压缩得特别小;
semi-condensed:从大到小逐步缩小;
semi-expanded:从小到大逐步变大;
expanded:拉伸文字;
extra-expanded:拉伸得很大;
ultra-expanded:拉伸得特别大。
PS:font-stretch是CSS2中所规定的属性,目前还没有浏览器可以支持该属性。
修饰
text-decoration: none | underline | overline | line-through | blink
none:默认值,无修饰样式;
underline:下划线;
overline:上划线;
line-through:贯穿线;
blink:闪烁。
阴影
text-shadow: none | color | length | length | length | inherit
none:不设置;
color:阴影的颜色;
length:长度值;
inherit:继承父级样式。
阴影有3个length要进行设置,分别是水平方向的距离、垂直方向的距离和模糊半径的长度(不能为负值)。
大小写转换
text-transform: capitalize | uppercase | lowercase | none | inherit
capitalize:首字母大写;
uppercase:变大写;
lowercase:变小写;
none:不改变;
inherit:继承。
间距-行间距
行间距:文本行与行之间的距离
line-height: normal | number | length | 百分数 | inherit
normal:默认值;
number:在当前文字大小的基础上再做增加来设置行高(不能为负值);
length:指定行高数(不能为负值);
百分数:用百分数表示行高;
inherit:继承。
行高是指上一行文字的基线与下一行文字之间的基线之间的距离,行高等于行间距加上文字高度。
间距-字间距
letter-spacing: normal | length | inherit
normal:默认值;
length:字间距的大小;
inherit:继承。
词间距
word-spacing: normal | length | inherit
normal:默认值;
length:词间距的大小;
inherit:继承。
文本样式
文字缩进
text-indent: length | 百分数 | inherit
length:缩进量;
百分数:父级元素的百分比;
inherit:继承。
水平对齐
text-align: left | right | center | justify | string | inherit
left:左对齐;
right:右对齐;
center:居中对齐;
justify:两端对齐;
string:字符对齐,多用于表格里;
inherit:继承。
垂直对齐
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分数 | length | inherit
baseline:默认值,基线对齐;
sub:下标;
super:上标;
top:顶端对齐;
text-top:文本行顶端对齐;
middle:中间对齐;
bottom:底端对齐;
text-bottom:文本行底端对齐;
百分数:相对于父级元素的基线的百分比;
length:调整长度;
inherit:继承。
文字方向-文本流入方向
derection: ltr | rtl | inherit
ltr:left to right,默认值,从左到右流入;
rtl:right to left,从右到左流入;
inherit:继承。
文字方向-文字方向
unicode-bidi: normal | embed | bidi-override | inherit
normal:默认值,不打开流入的文字,对其文字不重排;
embed:打开流入的文字,在对象内部进行隐式重排;
bidi-override:严格按流入方向重排文字;
inherit:继承。
文字方向-竖排文字
layout-flow: horizontal | vertical-ideographic
horizontal:书写方向从左到右,由上而下;
vertical-ideographic:书写方向从上至下,由左至右。
空格处理
white-space: normal | pre | nowrap | inherit
normal:默认值,浏览器自动忽略多余的空格,连续多个空格只显示一个;
pre:类似于pre元素,浏览器不忽略源代码的空格;
nowrap:不自动换行;
inherit:继承。
词间换行
word-break: normal | break-all | keep-all
normal:默认值,对于英文则以单词为单位换行,对于中文则以字为单位换行;
break-all:英文以字母为单位换行;
keep-all:对于英文以单词为单位换行,对于中文则以标点或空格为单位换行。
首字样式
使用伪元素fitst-letter,对于英文则代表第一个字母,对于中文则代表第一个文字。
首行样式
使用伪元素first-line,设置第一行文字的样式。
颜色与背景样式
文本颜色:指文本的颜色。
color: 颜色 | inherit
颜色:使用指定颜色值;
inherit:继承。
背景色:指元素后面背景的颜色。
background: transparent | 颜色 | inherit
transparent:设置透明,默认值;
颜色:使用指定颜色值;
inherit:继承。
背景图片
background-image: none | url(路径) | inherit
none:无背景图片(默认值);
url(路径):图片的URL地址;
inherit:继承;
背景附件:指背景图片如何依附元素。
background-attachment: scroll | fixed | inherit
scroll:滚动,随内容滚动,默认值;
fixed:固定,不随内容滚动;
inherit:继承。
背景重复
background-repeat: repeat | no-repeat | repeat-x | repeat-y | inherit
repeat:重复,平铺图片,默认值;
no-repeat:不重复,不平铺图片;
repeat-x:水平方向重复;
repeat-y:垂直方向重复;
inherit:继承。
背景定位:背景图片的定位,要设置两个值,分别是相对于元素左上角的x轴和y轴,默认是0px。
background-position: top | center | bottom | left | right | 数值 | 百分数 | inherit
top:顶部;
center:中部;
bottom:底部;
left:左侧;
right:右侧;
数值:用数值指定图片的位置;
百分数:用百分数表示位置;
inherit:继承;
背景综合应用(可节省代码)
background: background-color | background-image | background-repeat | background-attachmen | background-position
background-color:颜色;
background-image:图片;
background-repeat:重复方式;
background-attachmen:附件;
background-position:定位。
当前文章:css中字体样式有哪些,css中字体样式有哪些
本文来源:http://pwwzsj.com/article/dsdogjj.html