html字体样式幼圆,设置字体样式:字号⼤⼩,字体种类,字体
粗细
font-size:字号⼤⼩
font-size属性⽤于设置字号,该属性的值可以使⽤相对长度单位,也可以使⽤绝对长度单位,其中,相对长度单位⽐较常⽤,推荐使⽤像素单位px,绝对长度单位使⽤较少。具体如下:
相对长度单位
说明
em
相当于当前对象内的字体尺⼨
px
像素,最常⽤,推荐使⽤
绝对长度单位
说明
in
英⼨
cm
厘⽶
mm
毫⽶
pt
font-family:字体
font-familay属性⽤于设置字体,⽹页中常⽤的字体有宋体、微软雅⿊、⿊体等,例如将⽹页中所有段落⽂本的字体设置为微软雅⿊,可以使⽤如下CSS代码:
p{font-family:"微软雅⿊"}
可以同时制定多个字体,中间以逗号隔开,表⽰如果浏览器不⽀持第⼀个字体,则会尝试下⼀个,知道到合适的字体。
常⽤技巧:
1.现在⽹页中普遍使⽤14px+.
2.尽量使⽤偶数的数字字号,ie6以及以下的浏览器在设置奇数时,会有兼容性问题
3.各种字体之间必须使⽤英⽂状态下的逗号隔开。
4. 中⽂字体需要加英⽂状态下的引导,英⽂字体⼀般不需要加引导,当需要设置英⽂字体时,英⽂字体名必须位于中⽂字体名之前。
5.如果字体名中间包括空格、#、$等符号,则该字体必须加英⽂状态下的单引号或双引号,例如font-family:"Times New Roman";.
6. 尽量使⽤系统默认字体,保证在任何⽤户的浏览器中都能正确显⽰。
CSS Unicode : 字体
在CSS中设置字体名称,直接写中⽂是可以的。但是在⽂件编码(GB2312、UTF-8等)不匹配时会产⽣乱码的错误。xp系统不⽀持类似微软雅⿊的中⽂。
⽅案⼀:我们可以使⽤英⽂来替代。⽐如font-family:"Microsoft Yahei".
⽅案⼆: 在CSS直接使⽤Unicode编码来写字体名称可以避免这些错误。使⽤Unicode写中⽂字体名称,浏览器可以正确的解析的。
font-family:"\SFAE\8F6F\9ED1",表⽰设置字体为“微软雅⿊”。
字体名称
英⽂名称
Unicode 编码
宋体
SimSun
\5B8B\4F53
新宋体
NSimSum
\65B0\5B8B\4F53
⿊体
SimHei
fontweight属性bold
\9ED1\4F53
微软雅⿊
Microsoft YaHei
\5FAE\8F6F\96C5\9ED1
楷体_GB2312
KaiTi_GB2312
\6977\4F53_GB2312\
⾪书
LiSu
\96B6\4E66\
幼圆
YouYuan
\5E7C\5706
华⽂细⿊
STXihei
\534E\6587\7EC6\9ED1
细明体
MingLiU
\7EC6\660E\4F53
新细明体
PMingLiU
\65B0\7EC6\660E\4F53
我们以后写unicode字体,尽量只写宋体和微软雅⿊:“\5B8B\4F53”,“\5FAE\8F6F\96C5\9ED1”
font-weight : 字体粗细
字体加粗除了⽤ b 和 strong 标签之外,可以使⽤css来实现,但是CSS是没有语义的。
font-weight属性⽤于定义字体的粗细,其可⽤属性:normal、bold、bolder、lighter、100—900(100的整数倍)。
⼩技巧:
数字400等价于normal,⽽700等价于bold,但是我们更喜欢⽤数字来表⽰。
CSS注释
html注释:
css注释:/* 需要注释的内容 */ 进⾏注释的
即在需要注释的内容前⾯使⽤ “ /* ”,在需要注释的内容后⾯使⽤“ */ ”
总结:html 注释和css注释⾮常提倡⼤家使⽤
font-style : 字体风格
字体倾斜除了⽤i和em标签之外,可⽤使⽤CSS来实现,但是CSS是没有语义的。
font-style属性⽤于定义字体风格,如设置斜体、倾斜或正常字体、其可⽤属性值如下:
normal:默认值,浏览器会显⽰标准的字体样式。
italic:浏览器会显⽰斜体的字体样式。
oblique:浏览器会显⽰倾斜的字体样式。
⼩技巧:
平时我们很少给⽂字加斜体,反⽽喜欢给斜体标签(em,i)改为普通模式。
font : 综合设置字体样式(重点)
font属性⽤于对字体样式进⾏综合设置,其基本语法格式如下:
选择器{font:font-style font-weight font-size/line-height font-family;}
使⽤font属性时,必须按上⾯语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作⽤。开发者⼯具(chrome)
此⼯具是我们的必备⼯具,以后代码出了问题,我们⾸先第⼀反应就是:
“按F12”或者是“shift+Ctrl+l” 打开 开发者⼯具。
菜单:单击⽹页空⽩处———查看。
⼩技巧:
ctrl+滚轮 可以放⼤开发者⼯具代码⼤⼩。
左边是HTML元素结构,右边是css样式
右边css样式可以改动数值和颜⾊查看更改后效果。