css字体属性详细总结-创新互联
1,font-size属性设置字体的大小
超过10年行业经验,技术领先,服务至上的经营模式,全靠网络和口碑获得客户,为自己降低成本,也就是为客户降低成本。到目前业务范围包括了:成都网站建设、网站制作,成都网站推广,成都网站优化,整体网络托管,小程序定制开发,微信开发,成都app软件开发公司,同时也可以让客户的网站和网络营销和我们一样获得订单和生意!声明:
有能力管理文本的大小在 web 设计领域很重要。但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。
请始终使用正确的 HTML 标题,比如使用
- 来标记标题,使用 来标记段落。
使用像素来设置字体大小 (px)
通过像素设置文本大小,可以对文本大小进行完全控制:
h2 {font-size:60px;}
使用百分比设置字体大小 (%)
父元素的百分比
body{
font-size: 40px;
}
h2,h3{
font-size: 100%; 表示和父元素body元素定义的字体一样大
}
h2{
font-size:50%; 表示相对于父元素来说,h2属性字体是父元素的1/2;(20px)
}
h3{
font-size: 200%; 表示相对于父元素来说,h3属性字体是父元素的2倍;(80px)
}
smaller比父元素更小
body{
font-size: 40px;
}
h2,h3{
font-size: smaller; 表示比父元素body元素定义的字体更小,
}
larger:比父元素更大:
body{
font-size: 40px;
}
h2,h3{
font-size: larger; 表示比父元素body元素定义的字体更大,
}
inherit:继承父元素的
body{
font-size: 40px;
}
h2,h3{
font-size: larger; 表示继承父元素body元素定义的字体大小,
}
2,font-family定义字体类型
可以使用逗号(,)隔开,以确保字体不存在的时候直接使用下一个字体
p {
font-family: '微软雅黑',‘宋体’Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;
}
3,font-weight字体加粗
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
normal(默认值),bold(粗), bolder(更粗) ,lighter(更细)
p.normal {
font-weight:normal;
}
p.thick {
font-weight:bold;
}
p.thicker {
font-weight:900
}
4,font-style字体风格
normal :正常标准
italic :斜体
oblique :倾斜
inherit :继承
p.normal {
font-style:normal;
}
p.italic {
font-style:italic;
}
p.oblique {
font-style:oblique;
}
italic 和 oblique 的区别
font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。
5,font-variant 小型大写字母显示文本
font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
p.small
{
font-variant:small-caps;
}
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
本文标题:css字体属性详细总结-创新互联
地址分享:http://pwwzsj.com/article/djjchi.html
来标记段落。
使用像素来设置字体大小 (px)
通过像素设置文本大小,可以对文本大小进行完全控制:
h2 {font-size:60px;}
使用百分比设置字体大小 (%)
父元素的百分比
body{ font-size: 40px; } h2,h3{ font-size: 100%; 表示和父元素body元素定义的字体一样大 } h2{ font-size:50%; 表示相对于父元素来说,h2属性字体是父元素的1/2;(20px) } h3{ font-size: 200%; 表示相对于父元素来说,h3属性字体是父元素的2倍;(80px) }
smaller比父元素更小
body{ font-size: 40px; } h2,h3{ font-size: smaller; 表示比父元素body元素定义的字体更小, }
larger:比父元素更大:
body{ font-size: 40px; } h2,h3{ font-size: larger; 表示比父元素body元素定义的字体更大, }
inherit:继承父元素的
body{ font-size: 40px; } h2,h3{ font-size: larger; 表示继承父元素body元素定义的字体大小, }
2,font-family定义字体类型
可以使用逗号(,)隔开,以确保字体不存在的时候直接使用下一个字体
p {
font-family: '微软雅黑',‘宋体’Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;
}
3,font-weight字体加粗
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
normal(默认值),bold(粗), bolder(更粗) ,lighter(更细)
p.normal { font-weight:normal; } p.thick { font-weight:bold; } p.thicker { font-weight:900 }
4,font-style字体风格
normal :正常标准
italic :斜体
oblique :倾斜
inherit :继承
p.normal { font-style:normal; } p.italic { font-style:italic; } p.oblique { font-style:oblique; }
italic 和 oblique 的区别
font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。
5,font-variant 小型大写字母显示文本
font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
p.small { font-variant:small-caps; }
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
本文标题:css字体属性详细总结-创新互联
地址分享:http://pwwzsj.com/article/djjchi.html