CSS：字体样式（字体系列、大小、加粗、风格、变形等）
时间-12-10 14:56:32CSDN博客
原文/books1958/article/details/41806019
主题CSS
CSS 字体属性定义文本的（如斜体）和变形（如小型大写字母）
代码整理自w3school：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><metahttp-equiv="Content-Language"content="zh-cn" /><head><style>body{font-family:sans-serif;font-size:100%}h1{font-family:monospace;}h3{font-family:Georgia,serif;}p.italicFont{font-style:italic;}p.obliqueFont{font-style:oblique;}p.normalVariant{font-variant:normal}p.smallCaps{font-variant: small-caps}p.bold100{font-weight:100}p.bold900{font-weight:900}p#pix16{font-size:16px}p#pix20{font-size:20px}p#em0_8{font-size:0.8em}p#em1{font-size:1em}p#em2{font-size:2em}div#bg_01{background-color:#cff}div#bg_02{background-color:#fcf}</style></head><!--CSS字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。--><title>CSS 字体</title><h1>这是h1标题，将应用monospace字体。</h1><p>这是一个普通的段落，将应用指定于body的通用字体：sans-serif</p><!--建议在所有font-family规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。--><h3>h5标题：Georgia字体（若电脑中无该字体，则以serif字体显示）</h3><!--字体风格--><pclass="italicFont">文本斜体显示<p><pclass="obliqueFont">文本倾斜显示<p><p>注：通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。</p><hr/><!--字体变形--><h3>字体变形</h3><pclass="normalVariant">This is a paragraph.<p><pclass="smallCaps">“小写字母转为大写字母，字体大小不变：”：This is a paragraph.<p><h3>字体加粗</h3><pclass="bold100">font-weight:100的文字。</p><pclass="bold900">font-weight:900的文字。</p><hr/><!--字体大小--><h3>字体大小，绝对值:px 相对值:em (1em 等于当前的字体尺寸)</h3><divid="bg_01"><pid="pix16">文本大小:16px</p><pid="pix20">文本大小:20px</p></div><divid="bg_02"><pid="em0_8">文本大小:0.8em</p><pid="em1">文本大小:1em</p><pid="em2">文本大小:2em</p></div></html>
效果图：
