您的位置：首页 > Web前端 > CSS

CSS3——字体font

2016-01-06 09:30 519 查看

代码块

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style>
</style>
</head>


<h1>1.字体font-family</h1>
<p style="font-family: 黑体, 宋体">
最好提供多种字体类型，若浏览器不能正确获取，可自动选择后一种字体类型</p>


<h1>2.字号font-size</h1>
<div style="font-size: 16pt">父元素字体大小:16pt
<p style="font-size: inherit">inherit继承父元素的字体大小：16pt</p>
<p style="font-size: 50%">子标记：50%(基于父对象)</p>
<p style="font-size: 12pt">子标记：12pt</p>
<h2>绝对字体尺寸</h2>
<p style="font-size: xx-small">最小xx-small</p>
<p style="font-size: x-small">较小x-small</p>
<p style="font-size: small">小small</p>
<p style="font-size: medium">正常medium</p>
<p style="font-size: large">大large</p>
<p style="font-size: x-large">较大x-large</p>
<p style="font-size: xx-large">最大xx-large</p>
<h2>相对字体尺寸</h2>
<p style="font-size: smaller">小smaller</p>
父元素字体大小:16pt
<p style="font-size: larger">大larger</p>
</div>


<h1>3.字体风格font-style</h1>
<p style="font-style: italic">斜体字italic</p>
<p style="font-style: normal">标准字normal</p>
<p style="font-style: oblique">倾斜字oblique</p>
<p style="font-style: inherit">继承inherit(这里就不继承了)</p>


<h1>4.加粗字体font-weight</h1>
<p style="font-weight: lighter">更细字体lighter</p>
<p style="font-weight: normal">标准字体normal</p>
<p style="font-weight: bold">粗体字体bold</p>
<p style="font-weight: bolder">更粗字体bolder</p>
<p style="font-weight: 100">属性值100 (100-900)</p>
<p style="font-weight: 500">属性值500</p>
<p style="font-weight: 900">属性值900</p>


<h1>5.小写字母→大写字母font-variant</h1>
<p style="font-variant: normal">This Is A Test(normal)</p>
<p style="font-variant: small-caps">This Is A
Test(small-caps原本就是大写的大写字母比较大)</p>
<p style="font-variant: inherit">This is a test(继承)</p>


<h1>6.字体复合属性font</h1>
<p style="font: normal bolder normal 15pt 黑体, 宋体">
font：①font-variant ②font-weight
a74a
③font-style
④<span style="color:red">font-size</span>
⑤<span style="color:red">font-family</span>，
前三个可自由调换，各个属性空格隔开，多个字体逗号隔开</p>


<h1>7.字体颜色color</h1>
<p style="color:red">属性值为颜色名称：red</p>
<p style="color:#369000">属性值为十六进制：#369000</p>
<p style="color:rgb(255,0,0)">属性值为rgb代码：rgb(255,0,0)</p>
<p style="color:inherit">从父元素继承颜色：inherit</p>
<p style="color:hsl(0,75%,50%)">属性值为hsl代码：hsl(0,75%,50%)</p>
<p style="color:hsla(120,50%,50%,1)">属性值为hsla代码：hsla(120,50%,50%,1)，CSS3新增</p>
<p style="color:rgba(125,10,45,0.5)">属性值为rgba代码：rgba(125,10,45,0.5)，CSS3新增</p>


</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  字体 CSS3
相关文章推荐
新的分享
章节导航