CSS:字体样式(字体系列、大小、加粗、风格、变形等)

CSS:字体样式(字体系列、大小、加粗、风格、变形等)

时间 2014-12-10 14:56:32  CSDN博客

原文  http://blog.csdn.net/books1958/article/details/41806019

主题 CSS

CSS 字体属性定义文本的(如斜体)和变形(如小型大写字母)

代码整理自w3school

http://www.w3school.com.cn

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/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>

效果图:

 

  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值