CSS基础——字体属性,风格字体

font-size属性定义字体大小
font-weigth属性设置文本字体粗细
font-style属性设置文本风格
font-family属性设置元素字体类型

设置字体大小

font-size

p{
    font-size:20px;
}

注意:

  1. 谷歌浏览器默认的文字大小为16px
  2. 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
  3. 可以给 body 指定整个页面文字的大小

字体粗细

font-weight

p{
    font-weight:bold;
}

字体粗细
注意:

  1. 在开发时,更偏向使用数字设置

字体样式

font-style

i{
    font-style:normal
}

字体样式

字体类型

font-family 指定一个元素的字体

p{
    font-family:"Times New Roman",Georgia,Serif;
}

注意:

  1. 字体何时需要添加引号 当字体具体某个取值中若有一种样式名称包含空格和书写中文字体名称,则需要用双引号或单引号表示
p{
font-family: "Microsoft YaHei", "Arial Narrow", sans-serif,"黑体-简";
}
  1. 字体的中英文写法: 一般字体文件都是用英文命名的(如SimSun、Microsoft、Yahei),在大多数情况下直接使用显示名称也能正确的显示(如微软雅黑、宋体),但是有一些用户的特殊设置会导致中文声明无效。
    因此,保守的做法是使用字体的字体名称(英文)或者两者兼写
p{ font-family: STXihei,"Microsoft YaHei"; font-family: STXihei, "华文细黑", "Microsoft YaHei","微软雅黑"; }
  1. 声明英文字体
    绝大部分中文字体里都包含英文字母和数字,不进行英文字体声明是没有问题的,但是大多数中文字体中的英文和数字的部分都不是特别漂亮,所以也可以对英文字体进行声明。
    由于英文字体中大多不包含中文,我们可以先进行英文字体的声明,这样不会影响到中文字体的选择,因此优先使用优秀的英文字体,中文字体声明则紧随其次。
p{
    font-family: Arial, "Microsoft YaHei";
}
  1. 通用中文字体的英文名称
    宋体 SimSun
    黑体 SimHei
    微软雅黑 Microsoft YaHei
    微软正黑体 Microsoft JhengHei
    新宋体 NSimSun
    仿宋 FangSong
    楷体 KaiTi
    仿宋_GB2312 FangSong_GB2312
    楷体_GB2312 KaiTi_GB2312

字体的综合写法

字体属性可以把以上文字样式综合来写,这样可以更节省代码

body{
font:font-style font-weight font-size/line-height font-family;
}

p {
    font: italic 700 20px MFMingHei;
}

注意:

  1. 使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序
  2. 各个属性间以空格隔开
  3. 不需要设置的属性可以省略(取默认值),但必须保留 font-sizefont-family 属性,否则 font 属性将不起作用

字体总结

字体样式总结

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值