开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《HTML5+CSS3网页设计入门必读》——6.3 调整字体

简介:
+关注继续查看

本节书摘来自异步社区《HTML5+CSS3网页设计入门必读》一书中的第6章,第6.3节,作者: 【美】Julie Meloni更多章节内容可以访问云栖社区“异步社区”公众号查看。

6.3 调整字体

有时,你可能想对文本的大小和外观进行更多一点控制,而不仅仅是将其设置为粗体或斜体。在我深入讨论使用CSS调整字体的合适方式之前,让我们简要探讨在CSS出现之前是怎样操作的:当你查看其他Web站点的源代码时,仍有可能发现这种方法的一些示例。记住,仅仅由于这些老方法仍在使用并不意味着你应该如法炮制。

在样式表投入使用之前,现在被逐步淘汰的标签用于控制Web页面文本中的字体。

注意:

我不能充分强调标签将不会被使用!这里仅仅出于演示和历史目的而使用它。
例如,曾经使用下面的HTML代码更改页面上的一些文本的大小和颜色:

<font size="5" color="purple">This text will be big and purple.</font>

可以看到,< font >标签的size和color属性使得可以不用太费力地改变文本的字体。尽管这种方法工作得很好,但是由于CSS样式规则,它已经被一种更高级的字体格式化方法所取代。下面给出了几种用于控制字体的主要的样式规则。

  • font-family:设置字体系列(字形)。
  • font-size:设置字体的大小。
  • color:设置字体的颜色。

font-family样式规则允许设置用于显示文本的字形。你可以(并且通常应该)为这个样式指定多个值(用逗号隔开),使得如果用户系统上的第一种字体不可用,那么浏览器将可以尝试一种替代字体。

注意:

在第7章中将学习关于控制页面上的文本颜色的更多知识。该章还将说明如何创建你自己的自定义颜色,以及控制文本链接的颜色。
提供替代字体系列很重要,因为每个用户都可能会安装不同的字体集,至少会超越常用的基本核心字体集(如Arial、Times New Roman等)。通过提供替代字体列表,当无法找到理想的字体时,就有更好的机会使页面优雅地转而依靠一种已知的字体。下面给出了一个font-family样式的示例,它用于设置一个文本段落的字形:

<p style="font-family:arial, sans-serif, 'times roman'">

这个示例具有几个有趣的部分。第一,将arial指定为主字体。大小写不影响字体系列,因此arial与Arial或ARIAL没有什么不同。关于这段代码的另一个有趣的方面是:字体名称“times roman”是用单引号括住的,因为它中间有一个空格。不过,由于'times roman'出现在sans-serif的通用规范之后,将不太可能使用它。由于sans-serif位于第二个位置,因此它告诉浏览器:“如果这台机器上没有安装Arial,那么就使用默认的sans-serif字体。”

font-size和color样式规则也常用于控制字体的大小和颜色。font-size样式可以设置为一种预先定义的大小(如small、medium或large);color则可以设置为一种预先定义的颜色(如white、black、blue、red或green),或者可以把它设置为一种特定的十六进制颜色(如#ffb499)。下面是前一个段落示例的更好版本,并且指定了字体大小和颜色:

<p style="font-family:arial, 'times roman', sans-serif; font-size:;
color:green">

程序清单6.3中的示例Web内容以及如图6.3所示的结果,使用了一些字体样式规则来创建一份基本的在线简历的开始部分。

注意:

在第7章将学习十六进制颜色。目前,只需理解color样式规则允许指定精确的颜色,而不仅仅是使用green、blue、orange等。
程序清单6.3 使用字体样式规则创建基本的简历

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>R&eacute;sum&eacute; for Jane Doe</title>
  <style type="text/css">
   body {
    font-family: Verdana, sans-serif;
    font-size: 12px;
   }
   header {
    text-align: center;
   }
   h1 {
    font-family:, serif;
    font-size:28px;
    text-align:center;
   }
   p.contactinfo {
    font-size:14px;
   }
   p.categorylabel {
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
   }
   div.indented {
    margin-left: 25px;
   }
  </style>
 </head>
 <body>
         <header>
         <h1>Jane Doe</h1>
         <p class="contactinfo">, Sometown,
         CA 93829<br/>
         tel: 555-555-1212, e-mail: jane@doe.com</p>
         </header>
         <section>
         <p class="categorylabel">Summary of Qualifications</p>
         <ul>
         <li>Highly skilled and dedicated professional offering a
          solid background in whatever it is you need.</li>
         <li>Provide comprehensive direction for whatever it is
         that will get me a job.</li>
         <li>Computer proficient in a wide range of industry-related
         computer programs and equipment. Any industry.</li>
         </ul>
         </section>
         <section>
         <p class="categorylabel">Professional Experience</p>
         <div class="indented">
            <p><strong>Operations Manager,
             Super Awesome Company, Some City, CA [Sept 2002 –
            present]</strong></p>
            <ul>
            <li>Direct all departmental operations</li>
            <li>Coordinate work with internal and external
            resources</li>
            <li>Generally in charge of everything</li>
            </ul>
            <p><strong>Project Manager,
        Less Awesome Company, Some City, CA [May 2000 - Sept
        2002]</strong></p>
        <ul>
        <li>Direct all departmental operations</li>
        <li>Coordinate work with internal and external
        resources</li>
        <li>Generally in charge of everything</li>
        </ul>
        /div>
        </section>
        <section>
        <p class="categorylabel">Education</p>
     <ul>
     <li>MBA, , May 2002</li>
     <li>B.A, Business Administration, ,
       May 2000</li>
     </ul>
       </section>
     <section>
        <p class="categorylabel">References</p>
     <ul>
        <li>Available upon request.</li>
     </ul>
     </section>
 </body>
</html>


<a href=https://yqfile.alicdn.com/2aeec397b7612c8ee10135f0f3e547c6f96772d6.png" >

使用CSS,如你在第3章中所学到的,它把样式集组织成类,可以看到文本格式化是如何应用于这段内容的不同区域的。如果密切查看div.indented类的定义,将会看到margin-left样式的使用。这个样式对元素的左边应用一定的空间量(在这个示例中是25像素),这个空间将导致图6.3中所示的缩进效果。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML & CSS
HTML & CSS
0 0
HTML&CSS 3|学习笔记
快速学习HTML&CSS 3
0 0
HTML&CSS 2|学习笔记
快速学习HTML&CSS 2
0 0
HTML&CSS 1|学习笔记
快速学习HTML&CSS 1
0 0
HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果
0 0
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
0 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
FLINK在大规模实时无效广告流量检测中的应用
立即下载
《企业全面上云成功路径与实践》
立即下载