字体样式设置学习笔记

一、 复习前一天学习的知识+记单词
二、字体样式设置
字体样式的大致特征:字体粗细、字体类型、字体大小、字体系列
1、 字体类型(font-style)
用于设置字体类型,可以设置的值(normal:普通字体、italic:斜体、oblique:倾斜字体)
2、字体粗细 font-weight它的值有(normal正常字体 、bold粗体、bolder更粗、lighter更细、100-900:步长为100 400等同于normal,而700等同于bold)
3、字体大小 font-size 用于将设置字体大小的,可以设置任意正整数和浮点数。默认情况下,几乎所有浏览器的默认字体大小为16px
4、字体系列 font-family 中文字体一定要给引号 英文有空格就要给引号没有空格可以不给。
5、组合值得写法如:.p1{font:nomal bold 20px “微软雅黑”;}注意分号引号要是英文情况下的。否则效果无效 字体风格和字体粗细是可以切换的也可以都不写,也可以给一个值。Font-size、 font-family两者顺序不能变 并且缺一不可。
用font的组合形式设置行高的写法列如:{font:22px/100px”宋体”; } 其中(100px就代表100px的行高 px也可以改成百分比)
二、 扩展: 字体的单位(px em rem)非常重要必须掌握
1、 px(像素)相对于显示器屏幕分辨率而言你的。
特点:a、无法调整那些使用px像素作为单位的字体大小。
b、2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
c、3. Firefox能够调整px和em,rem。但是96%以上的中国网民使用IE浏览器(或内核)。
2、.em 1em=16px(默认像素)根据当前字体大小来确定字体大小的
. 特点: em的值并不是固定的;
em会继承父级元素的字体大小。

当使用em作为单位时 接收最小值为12px,如果当前设置的元素继承大小小于12px时其大小就会强行变成12px。而且直接使用px作为单位,就允许小于12px。
3、rem
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。
这个单位与em有什么区别呢?
区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:
p {font-size:14px; font-size:.875rem;}
注意:
选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
px 与 rem 的选择?
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可
对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备
三、文本样式的设置
1、文本的颜色:color
2、文本居中方式:text-align

猜你喜欢

转载自blog.csdn.net/weixin_43748935/article/details/84570351