Web前端新人笔记之CSS字体 - 来治猩猩的我

<span style="font-family: Microsoft YaHei; font-size: 15px;">本章内容是阅读CSS权威指南的一个小积累和随笔。新人必看，老鸟也可查看并指出不足指出以便后人阅读更好地理解。O(∩_∩)O谢谢！！！<br><span style="color: #ff0000;">设置字体属性时样式变的最常见的用途之一；<br><span style="color: #000000;">不过，尽管字体选择很重要，但是目前还没有一种方法能确保在Web上一致的使用字体，因为没有一种统一描述字体和字体的变性方法；<br>除了各种特定字体系列外(如 <span style="color: #ff0000;">Times</span>、<span style="color: #ff0000;">Verdana</span>、<span style="color: #ff0000;">Helvetica</span>或<span style="color: #ff0000;">Arial</span>)，还定义了另外5中通用字体系列；<br><img src="http://images2015.cnblogs.com/blog/707288/201604/707288-20160419090727976-1817909733.png" alt=""><br><img src="http://images2015.cnblogs.com/blog/707288/201604/707288-20160419090902179-1401329476.png" alt=""><br><strong><span   style="max-width:90%"> 使用通用字体系列<br></span></strong><span style="font-size: 18px;"><span style="font-size: 15px;"> 可以使用属性font-family在文档中采用上述任何字体系列<br><img src="http://images2015.cnblogs.com/blog/707288/201604/707288-20160419091133991-1505936378.png" alt=""><br><strong><span   style="max-width:90%">使用引号<br></span></strong><span style="font-size: 15px;">只有当一个字体名中有一个或多个空格，或者如果字体名包括#或$之类的符号，才需要在font-family声明中加引号。</span></span></span></span></span></span>

h1{font-family:Wedgie,'Karrank%',Klingon,fantasy;}

<span style="font-family: Microsoft YaHei; font-size: 15px;"><span style="color: #ff0000;"><span style="color: #000000;"><span style="font-size: 18px;"><span style="font-size: 15px;"><span style="font-size: 15px;"><strong><span style="font-size: 18px;"> 字体加粗</span></strong><br /> 利用font-weight属性，CSS允许对字体加粗有更多的控制。<br /><img src="http://images2015.cnblogs.com/blog/707288/201604/707288-20160419091757726-1264749537.png" alt="" /><br /><span   style="max-width:90%"><strong>字体大小</strong></span><br />利用font-size属性，CSS允许对字体的大小有更多的控制</span></span></span></span></span></span>

有风格的字体

font-style：用于在normal文本、italic文本和、oblique

<span style="font-family: Microsoft YaHei; font-size: 15px;"><span style="color: #ff0000;"><span style="color: #000000;"><span style="font-size: 18px;"><span style="font-size: 15px;"><span style="font-size: 15px;"><img src="http://images2015.cnblogs.com/blog/707288/201604/707288-20160419092925632-883856892.png" alt="" /><br /></span></span></span></span></span></span><span   style="max-width:90%"><span style="color: #ff0000;"><span style="color: #000000;"><span style="font-size: 18px;"><strong>字体变形</strong><br /></span></span></span></span><span style="font-family: Microsoft YaHei;"><span style="color: #ff0000;"><span style="color: #000000;"><span style="font-size: 18px;"><span style="font-size: 15px;">除了大小风格，字体还可以变形。<br /></span></span></span></span></span><span style="font-family: Microsoft YaHei;"><span style="color: #ff0000;"><span style="color: #000000;"><span style="font-size: 18px;"><img src="http://images2015.cnblogs.com/blog/707288/201604/707288-20160419094150882-101326604.png" alt="" /></span></span></span></span><span   style="max-width:90%"><span style="color: #ff0000;"><span style="color: #000000;"><span style="font-size: 18px;"><br /><strong>字体拉伸</strong><br /><img src="http://images2015.cnblogs.com/blog/707288/201604/707288-20160419094512304-1041612606.png" alt="" /><br /><strong>字体拉伸&mdash;&mdash;拉伸字体字符</strong><br /><img src="http://images2015.cnblogs.com/blog/707288/201604/707288-20160419094648101-1187292028.png" alt="" /><br />font属性<br /><img src="http://images2015.cnblogs.com/blog/707288/201604/707288-20160419094753304-2118284462.png" alt="" /><br /><strong>使用系统字体</strong><br /><span   style="max-width:90%">caption　　用于有标题的控件<br />icon　　　  用于对图标加标签<br />menu　　　用于菜单，下拉菜单和菜单列表<br />message-box 　　用于对话框<br />small-caption　　用于对小控件加标签<br />status-bar　　　  用于窗口状态条</span></span></span></span></span>