[譯]HTML&CSS Lesson6: 排版

時間 2019-12-05

標籤 html&css html css lesson6 lesson 排版欄目 CSS 简体版

原文原文鏈接

隨着時間的推移，網絡字體排版已經獲得了很大的發展。有幾個不一樣的因素導致它的流行。其中被最普遍承認的因素是可嵌入咱們本身的網絡字體的系統的開發。css

過去咱們只能在網站中使用少許的字體。這些字體都是電腦中最經常使用的，因此它們最可能在屏幕上正常顯示。若是一個字體沒有安裝在電腦中，那麼網頁上就不能正常顯示。如今隨着嵌入字體的發展，咱們有了更多的字體選擇空間，包括那些咱們添加到網站中的字體。html

雖然嵌入字體的開發使咱們可以使用無數的新字體，但瞭解字體排版的基本原則仍是必不可少的。在這節課中，咱們將帶領你們瞭解這些基本原則，並將它們應用到咱們的HTML和CSS中。express

字型(Typeface) VS. 字體(font)segmentfault

字型‘typeface’和字體‘font’常常被互換，很容易混淆。在這裏對它們實際的含義作一個講解。api

字型‘typeface’表示咱們看到的。它是文字的外觀、感受和閱讀的藝術印象。瀏覽器

字體‘font’表示包含一個字型‘typeface’的文件，在電腦中安裝一個字體‘font’使電腦可以獲取到這個字型‘typeface’。安全

咱們能夠分別將它們比做一首歌和一個MP3，字型‘typeface’就相似於一首歌，只不過它是美術做品。而字體‘font’就相似於MP3，但它自己並不帶有藝術印象，只是一個傳遞藝術的媒介。服務器

譯者：我不會區分這兩個單詞的翻譯，正常狀況我都會使用「字體」來翻譯它們，想要了解得更細緻的讀者能夠閱讀原文 網絡

設置字體顏色

咱們在建立網站時一般會設置一個主字體及其顏色。雖然有不少例如字體大小、粗細等屬性能夠設置，但對頁面視覺效果影響最大的仍是其字型和顏色。用咱們自定義的字體和顏色覆蓋瀏覽器的默認值，能夠當即奠基咱們頁面的基調風格。ide

設置字體顏色的屬性爲color屬性。color屬性能夠接受幾種不一樣格式的色值。這些格式咱們有在第三節課HTML&CSS Lesson3: 瞭解CSS中提到，包括：關鍵字色值，十六進制色值，RGB，RGBa和HSL，HSLa。十六進制色值的使用是最廣泛的，由於它很是便捷，很是可控。

如下例子是改變頁面中全部<html>元素下的文本的顏色：

html {
  color: #555;
}

設置字體屬性

CSS 提供了不少屬性用於編輯頁面文本的樣式。這些屬性分爲兩類：基於文字的屬性和基於文本的屬性。大部分的屬性都以font-*或text-*爲前綴。接下來咱們來了解一下基於文字的屬性。

字體類型

font-family屬性用於聲明使用哪一種字體——包括備選或替代字體——來顯示文本。font-family的屬性值能夠同時包含多個字體名，用逗號隔開。

左邊開始第一個聲明的字體就是主字體，若是主字體不可用，則會按照從左到右的順序選用備選字體來代替。

當字體名由多個詞組成時，須要用引號將它們包起來。另外，最後一個字體應該指定系統默認字體，好比最經常使用的sans-serif或serif.

font-family屬性使用示例以下：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

在這個例子中，首先會選用Helvetica Neue字體，若是它不可用或者當前設備並無安裝此字體，那麼會按照順序選用下一個字體——Helvetica, 依次類推。

字體大小

font-size屬性提供了使用常見長度單位例如像素(px)，em，百分比(%)，點(pt)或關鍵字給文本設置字體大小的功能。

如下是將body元素的字體大小font-size設置爲14像素：

body {
  font-size: 14px;
}

字體樣式

將文本變爲斜體或者防止文本變爲斜體，咱們就要用到font-style屬性。font-style屬性接受四個關鍵字值：normal，italic，oblique和inherit。在這四個值中，咱們最經常使用的就是italic(將文本設置爲斜體)和normal(將文本恢復爲正常樣式)。

如下是將class爲special的元素的字體樣式font-style設置爲斜體italic：

.special {
  font-style: italic;
}

字體轉化

這個屬性並不經常使用，只有偶爾須要將文本設置爲小型大寫字母的狀況下會到font-variant屬性。font-variant接受三個值:normal，small-caps和inherit。最經常使用的值就是normal和small-caps,將文本切換爲正常模式或者轉換成小型大寫字母。

如下是將class爲firm的元素的文本轉化爲小型大寫字母：

.firm {
  font-variant: small-caps;
}

文字粗細

偶爾咱們會想將文字加粗或者設置到某個特定的粗細，這時候咱們就要使用font-weight屬性。font-weight的值能夠設置爲關鍵字或數字。

關鍵字值有normal，bold，bolder，lighter和inherit。在這些關鍵字值中，推薦使用normal和bold來設置字體的粗細，避免bolder或者lighter，最好使用數字值來完成更精準的控制。

如下練習中，將class爲daring的元素的字體粗細font-weight設置爲bold加粗。

.daring {
  font-weight: bold;
}

數字值100，200，300，400，500，600，700 和900能夠更精準的設置文字的粗細。文字從最細的100，按比例放大到最粗的900。參考了一下，關鍵字normal映射到400，關鍵字bold映射到700。所以任何低於400的值會顯得更細，而高於700的值會顯得更粗。

將class爲daring的font-weight設置爲600後，文本看起來加粗了，但不像bold那麼粗：

.daring {
  font-weight: 600;
}

文字粗細

在使用數字值以前，咱們須要確認當前字體是否支持咱們想要的字體粗細。若不支持，那麼這個粗細值就會默認爲最接近它的有效值。

例如， Times New Roman字體有兩種粗細：normal(400)和bold(700)，若嘗試把字體粗細設置爲900將會默認變爲最接近值700

行高

行高使用line-height屬性聲明，表示兩行文本之間的距離。line-height 接受全部常規長度值，長度單位咱們在第三課中有提到：瞭解CSS。

可讀性最佳的方案是將line-height設置爲font-size的1.5倍。咱們能夠經過將line-height設置爲150%或1.5來快速實現。但若是文本有基準線，則用像素px來控制line-height會更合適。

如下例子中，咱們把body元素中的行高line-height設置成22px：

body {
  line-height: 22px;
}

行高也能夠爲單行文本的元素設置上下居中。將line-height和height的屬性值設置成相同值就能夠實現：

.btn {
  height: 22px;
  line-height: 22px;
}

這種用法常見於按鈕，彈出信息框，以及其餘單行文本的塊中。

簡寫文字屬性

以上列出的文字屬性能夠合併成一個font屬性及其簡寫值。font屬性接受多個基於文字的屬性的值。這些值的排序以下所示，從左到右依次爲：font-style， font-variant，font-weight，font-size， line-height和 font-family。

做爲一個簡寫值，屬性值之間並不須要用逗號隔開(除了文字名，也就是font-family的多個值之間須要用逗號)。但font-size和line-height屬性值之間須要用斜槓/隔開。

當使用簡寫值時，除了font-size和font-family是必寫值，其餘值都是可選的。也就是說，咱們能夠按需求只寫font-size和font-family的屬性值。

html {
  font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

使用全部的字體屬性

咱們來看一個使用全部的字體屬性的例子。HTML和CSS以下所示：

HTML

<h2><a href="#">I Am a Builder</a></h2>

<p class="byline">Posted by Shay Howe</p>

<p>Every day I see designers and developers working alongside one another. They work intelligently in pursuit of business objectives. They work diligently making exceptional products. They solve real problems and take pride in their work. They are builders. <a href="#">Continue&#8230;</a></p>

CSS

h2,
p {
  color: #555;
  font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
  color: #0087cc;
}
a:hover {
  color: #ff7b29;
}
h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 6px;
}
.byline {
  color: #9799a7;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin-bottom: 18px;
}

CSS僞類選擇器

上述的例子中，咱們使用了以前沒見過的CSS僞類選擇器:hover。僞類是能夠添加到選擇器後用以調整元素某種狀態下樣式的關鍵字選擇器。

:hover是用戶把鼠標懸浮在某元素上時改變其樣式的選擇器。上述中咱們把它用在<a>元素上，能夠到看全部的<a>元素在鼠標懸停時字體顏色都會發生改變。

練習

如今回到咱們的「樣式討論會」網站，爲它添加一些字體屬性樣式。

咱們從更新全部文本的樣式開始。首先咱們爲<body>元素以font屬性及其簡寫值方式添加color，font-weight，font-size，line-height和font-family屬性值。
爲了儘量保持main.css的有序性，咱們新劃分一塊區域放置這些樣式，位置在重置樣式和網格樣式之間。
樣式內容以下所示：

/*
  ========================================
  Custom styles
  ========================================
*/
body {
  color: #888;
  font: 300 16px/22px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

在第四課盒子模型中，咱們有在各級標題以及段落添加過一些排版樣式，例以下外邊距。如今咱們要在這部分樣式區域中，爲一到四級的標題元素添加字體顏色。

h1, h2, h3, h4 {
  color: #648880;
}

接下來咱們爲各級標題元素設置對應的字體大小。<h1>和<h2>元素的font-size會相對較大，因此它們的line-height也要調整以保證文字正常清晰顯示。這裏咱們將line-height值設置爲44px，是<body>元素line-height的兩倍。

h1 {
  font-size: 36px;
  line-height: 44px;
}
h2 {
  font-size: 24px;
  line-height: 44px;
}
h3 {
  font-size: 21px;
}
h4 {
  font-size: 18px;
}

<h5>元素相對其餘標題元素會更特別一點，因此咱們要修改一些樣式。
咱們爲這些元素設置一個不同的color值和一個更小的font-size，同時也把`font-weight設置爲400或者normal。
瀏覽器在渲染標題元素時是默認加粗的，而個人標題元素目前的font-weight爲300。咱們首先在main.css最上面重置了樣式，將標題元素的font-weight設置爲了normal，而後又在<body>元素選擇器中將font-weight設置爲了300。
<h5>元素的font-weight設置爲了400會使這個標題的文本看起來更粗一些。

h5 {
  color: #a9b2b9;
  font-size: 14px;
  font-weight: 400;
}

在樣式表最開始咱們重置了瀏覽器默認樣式。而如今咱們要爲<strong>，<cite>和<em>再從新設置樣式。咱們將<strong>元素的font-weight設置爲400或normal，這相對來講比大部分文本都粗一些。接着咱們將<cite>和<em>元素的font-style設置爲italic。

strong {
  font-weight: 400;
}
cite, em {
  font-style: italic;
}

接着咱們來調整<a>元素的樣式。目前瀏覽器默認爲藍色，咱們要把它改爲和<h1>到<h4>元素一致的顏色。另外，咱們將鼠標懸浮在<a>上時的:hover狀態的color改成淺灰色。

/*
  ========================================
  Links
  ========================================
*/

a:hover {
  color: #a9b2b9;
}
a {
  color: #648880;
}

下面咱們來更新<header>元素的樣式。咱們在.logo選擇器中添加font-size和line-height，添加到現有的border-top，float，andpadding屬性之間。

.logo {
  border-top: 4px solid #648880;
  float: left;
  font-size: 48px;
  line-height: 44px;
  padding: 40px 0 22px 0;
}

由於咱們增大了.logo選擇器元素的大小，因此咱們要增長<header>元素中的<h3>元素的margin屬性以保持平衡。咱們先爲<h3>元素添加一個class tagline用以設置外邊距margin。

如下咱們是要修改的內容，須要應用到每一個頁面中：

HTML

<h3 class="tagline">August 24&ndash;26th &mdash; Chicago, IL</h3>

CSS

.tagline {
  margin: 66px 0 22px 0;
}

作完這些以後，咱們爲<nav>元素添加樣式。首先爲其添加一個class primary-nav，並設置font-size和font-weight屬性以使得導航能從頁頭中脫穎而出。

HTML

<nav class="primary-nav">
  ...
</nav>

CSS

.primary-nav {
  font-size: 14px;
  font-weight: 400;
}

<header>元素已經調整差很少了，咱們接着來看<footer>元素，以前課程中咱們爲其設置了class primary-footer，如今咱們在其中加入color和font-size屬性。除此以外，咱們也要將<small>元素的font-weight設置爲400。
修改後的代碼以下所示：

.primary-footer {
  color: #648880;
  font-size: 14px;
  padding-bottom: 44px;
  padding-top: 44px;
}
.primary-footer small {
  float: left;
  font-weight: 400;
}

回到主頁面上來，咱們將導航模塊的line-height調整到44px。<h2>的font-size調整到36px，全部段落<p>元素的font-size調整到24px。
咱們把這部分樣式添加到已存在的.hero選擇器中，併爲<h2>和<p>元素建立新的選擇器。修改後代碼以下所示：

.hero {
  line-height: 44px;
  padding: 22px 80px 66px 80px;
}
.hero h2 {
  font-size: 36px;
}
.hero p {
  font-size: 24px;
}

最後主頁中還剩下一個小問題。以前咱們將全部的錨點元素<a>鼠標懸浮時的字體顏色設置爲了淡灰。可是<a>元素中包裹的<h3>和<h5>元素因爲自身定義了color，<a>元素:hover效果下的color不起效。
如今咱們就要用相對複雜的選擇器去修復這個問題，咱們先爲每一個section元素添加一個class teaser，以下所示：

<section class="grid">

  <!-- Speakers -->
  
  <section class="teaser col-1-3">
    <a href="speakers.html">
      <h5>Speakers</h5>
      <h3>World-Class Speakers</h3>
    </a>
    <p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
  </section>

  ...

</section>

有了這個選擇器，咱們就能夠建立出複雜的選擇器來實現需求。咱們首先須要.teaser選擇器來肯定須要修改樣式的是含有這個class的元素的內部元素。咱們以前提過要修改鼠標懸浮在<a>元素上時的樣式，因此須要用到:hover僞類。最後咱們要添加h3選擇器去選中實際要修改樣式的元素。

結合起來修改的<h3>元素的樣式以下所示：

.teaser a:hover h3 {
  color: #a9b2b9;
}

完成之後，能夠看到頁面變得更漂亮了，而且有了一點本身的風格。

設置文本屬性

如今咱們瞭解了字體屬性例如字體大小，字型，粗細，行高等，接下來咱們要了解文本屬性例如如何對齊、修飾、縮進、變換文本以及設置文字間距。

文本對齊方式

對齊文本是頁面排版中很重要的一部分，咱們須要用到text-align屬性。text-align屬性有五個值：left，center，right，justify和inherit。這些值的意思都很是直白，就是向左對齊，向右對齊，居中以及兩端對齊。

如下是將全部段落文本居中對齊：

p {
  text-align: center;
}

但不要混淆text-align屬性和float屬性。text-align的值left和right是讓元素內部的文本向左或向右對齊。而float是讓元素自己整個往左或者往右。有些時候咱們指望text-align實現的效果，但也有些時候則須要用到float屬性。

文本修飾

text-decoration提供了一些方法來修飾文本。它接受的值有：none，underline，overline，line-through和inherit。使用text-decoration的場景不少，最多見的就是瀏覽器默認的下劃線連接

如下示例是爲class爲note的元素添加下劃線：

.note {
  text-decoration: underline;
}

text-decoration屬性能夠一次性添加多個值，每一個值之間使用空格隔開。

文本縮進

text-indent屬性用於元素中第一行文本的縮進，和常見的出版物中同樣。屬性接受全部的常見長度單位，包括像素px，點pt，百分比%等等。正值表示想內縮進，負值表示向外縮進。

如下例子是將<p>元素的文本向內縮進20px：

p {
  text-indent: 20px;
}

文本陰影

text-shadow屬性能夠爲文本設置一個或多個陰影。屬性通常須要四個值，從左到右數前三個值是長度值，最後一個是色值。

前三個值中，第一個值肯定橫向偏移，第二個值肯定縱向偏移，第三個值肯定模糊半徑。第四個值也就是最後一個值，肯定陰影的顏色，色值能夠是color屬性值的任何顏色值。

如下例子中，將<p>元素的文本陰影顏色設置爲30%不透明度的黑色，向右偏移3px，向下偏移6px，模糊半徑爲2px。

p {
  text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
}

若橫向和縱向偏移值爲負值，陰影會向左上方偏移。

盒子陰影

text-shadow屬性設置的是元素內部文字的陰影，若是咱們要爲整個元素設置陰影的話就要使用box-shadow屬性。

box-shadow和text-shadow很是類似，也依次接受橫向偏移量，縱向偏移量，模糊半徑和色值。

可是它還能夠接受第四個可選的長度值，這個值在色值以前，用以拓展陰影。若值爲正值，陰影比元素大小更大，若爲負值陰影則比元素小。

box-shadow還能夠在最開始接受一個可選值inset，使陰影在盒子內部顯示。

文本轉換
與font-variant相似的還有一個text-transform屬性。不過font-variant是將字體變爲替代變體，而text-transform直接改變文本而不是使用變體。text-transform屬性接受五個值：none，capitalize，uppercase，lowercase和inherit。

屬性值capitalize會把每一個單詞的首字母轉換成大寫，uppercase會將每一個字母轉換成大寫，lowercase會將每一個字母轉換成小寫。而none則會顯示原始文本。

如下示例中將<p>元素中的每一個字母都轉換成大寫：

p {
  text-transform: uppercase;
}

字母（文字）間距

letter-spacing屬性用以調整字母（文字）的間距，正值使間距變大，而負值則使間距縮小。屬性值none則返回默認的文字間距。

使用相對的長度單位，會有利於隨着字體大小的改變而正確的維護字母（文字）間距。不過即便如此，咱們也須要保持檢查代碼的好習慣。

如下示例中，咱們將<p>元素字母間距縮小0.5em：

p {
  letter-spacing: -.5em;
}

單詞間距

與letter-spacing相似，咱們可使用word-spacing調整單詞的間距。word-spacing屬性值也與letter-spacing一致，不過它調整的單詞間距而不是字母間距而已。

如下示例中，將<p>元素中的每一個單詞的間距調整爲.25em：

p {
  word-spacing: .25em;
}

使用全部的文本屬性

咱們重溫下以前使用了全部字體屬性的例子，如今再給其增長一些文本屬性。

HTML

<h2><a href="#">I Am a Builder</a></h2>

<p class="byline">Posted by Shay Howe</p>

<p class="intro">Every day I see designers and developers working alongside one another. They work intelligently in pursuit of business objectives. They work diligently making exceptional products. They solve real problems and take pride in their work. They are builders. <a href="#">Continue&#8230;</a></p>

CSS

h2,
p {
  color: #555;
  font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
  color: #0087cc;
}
a:hover {
  color: #ff7b29;
}
h2 {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
h2 a {
  text-decoration: none;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
}
.byline {
  color: #9799a7;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin-bottom: 18px;
}
.intro {
  text-indent: 15px;
}
.intro a {
  font-size: 11px;
  font-weight: bold;
  text-decoration: underline;
  text-transform: uppercase;
}

練習

對文本屬性有了解以後，咱們將它們應用到「樣式討論會」網站中去。

目前頁面中每一個連接都有默認的下劃線，但有時咱們並不須要它，因此對此要作一些修改。
咱們將樣式添加到main.css文件中，首先使用text-decoration屬性移除連接的下劃線，而後爲<p>元素中的全部連接都增長一個border-bottom屬性，這樣下劃線的顏色就能夠設置成跟文本顏色不一致的顏色。
鼠標懸浮時的樣式與以前的一致，因此最終樣式以下所示：

a {
  color: #648880;
  text-decoration: none;
}
a:hover {
  color: #a9b2b9;
}
p a {
  border-bottom: 1px solid #dfe2e5;
}

咱們以前到過<h5>元素和其餘各級標題元素的樣式有所不一樣，如今咱們要爲其再添加一個text-transform屬性使全部字母轉爲大寫。修改後的代碼以下所示：

h5 {
  color: #a9b2b9;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}

以前咱們爲<header>元素中的導航添加了一個class primary-nav，如今咱們要在現有的font-size和font-weight屬性以後添加letter-sapcing和text-transform屬性增長字母間距並將字母轉化爲大寫。
含有class primary-nav的<nav>元素修改後的樣式以下所示：

.primary-nav {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
}

以前咱們將<header>元素中的logo設置了左浮動，如今咱們想將標語佈局在logo右側。咱們但願它一直在<header>元素的右側。
咱們須要將帶有class tagline的 <h3>元素的text-align屬性值設置爲right。
咱們在現有的margin屬性下面添加樣式，修改後的樣式代碼以下所示：

.tagline {
  margin: 66px 0 22px 0;
  text-align: right;
}

咱們想在<header>和<footer>中都添加向右對齊的導航欄。因爲<header>和<footer>中都有向左浮動的子元素，因此咱們能夠爲導航設置與tagline同樣的樣式。
因爲<header>和<footer>中的浮動元素是脫離正常文檔流的，因此其餘元素會環繞浮動元素顯示。所以咱們的導航欄也會環繞這些浮動元素顯示。
因爲咱們想要共享導航欄的樣式，因此咱們要爲兩個導航欄添加相同的classnav。修改後<header>元素的結構以下所示：

<header class="container group">

  <h1 class="logo">...</h1>

  <h3 class="tagline">...</h3>

  <nav class="nav primary-nav">
    ...
  </nav>

</header>

<footer>元素結構以下所示：

<footer class="primary-footer container group">

  <small>...</small>

  <nav class="nav">
    ...
  </nav>

</footer>

別忘了修改每一個頁面中的<header>和<footer>元素。
因爲classnav用在兩個導航欄中，咱們在main.css文件中新劃分出一個區域添加導航樣式。併爲其設置text-align爲right。稍後咱們再在此基礎上拓展其餘樣式。

/*
  ========================================
  Navigation
  ========================================
*/

.nav {
  text-align: right;
}

咱們已爲不少元素添加了text-align屬性，如今還須要爲hero選擇器設置text-align爲center。剛添加的樣式，以及以前現有的line-height和padding屬性，都位於 main.css文件的「home page」區域。

.hero {
  line-height: 44px;
  padding: 22px 80px 66px 80px;
  text-align: center;
}

如今咱們的「樣式討論會」網站有了較好的樣式排版，不過咱們的網站還須要進一步完善。

使用網絡安全字體

每一個電腦、平板、智能手機以及其餘有網絡瀏覽功能的設備都預裝了一部分默認字體。咱們能夠在網站中自由的使用這部分字體，由於咱們知道不管是什麼設備，字體都會被正確渲染。這些字體就被稱爲「網絡安全字體」。這裏列出了一部分最安全的網絡安全字體：

Arial
Courier New,Courier
Garamond
Georgia
Lucida Sans, Lucida Grande, Lucida
Palatino Linotype
Tahoma
Times New Roman, Times
Trebuchet
Verdana

嵌入網絡字體

咱們也能夠經過CSS的@font-face屬性，將字體上傳到服務器並在網站上使用它。這個屬性爲線上排版創造了奇蹟。今後線上排版將比以往任何事都要更加豐富多彩。

嵌入字體的步驟以下。首先咱們要在@font-face中，經過font-family屬性定義字體名，並經過src屬性加載字體路徑(咱們選中的字體文件的路徑)。這樣咱們就可以在選擇器中經過font-family來獲取咱們定義的字體。

@font-face {
  font-family: "Lobster";
  src: local("Lobster"), url("lobster.woff") format("woff");
}
body {
  font-family: "Lobster", "Comic Sans", cursive;
}

有嵌入字體的能力不意味着有法律權限這樣作。字體是藝術做品，將它發佈到網站上很容易被竊取，因此字體的使用權僅限於咱們批准的許可範圍。

幸運的是，線上新字體的價值已經被承認，一些公司在網站的新字體上開發了受權。
這些公司中，例如 Typekit 和 Fontdeck 須要付費才能獲取字體受權，而其餘的公司，例如 Google Font, 則能夠免費得到字體受權。因此在使用新字體以前，須要知道咱們是否有權使用它。

練習

爲了使「樣式討論會」網站更具個性，咱們試着將谷歌字體應用到咱們的網站中。

首先咱們登陸到 Google Fonts 網，搜索咱們須要的字體：Lato。找到之後添加到需求欄，並按照步驟往下走。
到選擇字體粗細的時候，咱們要選擇頁面中使用到的300和400，再選擇一個100的變體加入咱們的需求欄。
谷歌給咱們提供了一個放在<head>元素中的<link>元素。咱們將它添加到現有的<link>元素之下。這個元素中包含了咱們須要的Lato字體的@font-face的CSS文件。
添加了這個新的<link>元素以後，咱們的<head>元素結構以下所示：

<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
  <link rel="stylesheet" href="assets/stylesheets/main.css">
  <link rel="stylesheet"
  href="http://fonts.googleapis.com/css?family=Lato:100,300,400">
</head>

如今咱們頁面中已經可使用Lato字體了。如今咱們將其添加到<body>元素的font屬性中做爲咱們的主字體。
咱們將Lato字體添加到字體堆棧的最前面："Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif。
雖然 Lato是個單詞，但因爲它是嵌入字體，因此咱們須要用引號將它包起來。修改後的<body>元素樣式以下所示：

body {
  color: #888;
  font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Lato 字體運行後「樣式討論會」網站的文本樣式都會被更新。接下來咱們來看一看logo模塊。
在logo選擇器中，首先添加text-weight:100將文字調整到極細，再添加text-transform:uppercase將全部字母轉爲大寫。最後設置letter-spacing:.5px使字母間距擴大。
修改後樣式以下所示：

.logo {
  border-top: 4px solid #648880;
  float: left;
  font-size: 48px;
  font-weight: 100;
  letter-spacing: .5px;
  line-height: 44px;
  padding: 40px 0 22px 0;
  text-transform: uppercase;
}

由於font-weight:100是有效的，因此咱們能夠將導航模塊中全部的段落文本都設置成這個粗細。仍是在現有的選擇器中添加，代碼以下所示：

.hero p {
  font-size: 24px;
  font-weight: 100;
}

在這節課中咱們爲「樣式討論會」網站作了很大的改進，它的界面開始真正大放異彩。

演示源代碼

這是練習的源代碼。在線預覽或點擊下載

引用

線上寫做有時會涉及引用不一樣的來源或引用。全部不一樣的引用均可以用HTML中的<cite>，<q>，<blockquote>涵蓋。因爲它們一般都與正常文本的樣式有所區別，因此咱們就在這節課中討論它們。

雖然須要不少練習纔可以掌握如何使用正確的元素和屬性來標記引用，但大多數時候，咱們均可以遵循如下規則：

<cite>:用於引用原創做品，做者或者資源。
<q>：用於簡短的內聯引語。
<blockquote>：用於較長的外部引用。

引用原創做品

行內元素<cite>在HTML中專門用於引用原創做品。這個元素必須包含做品標題，做者名或者做品連接。<cite>元素中的文本瀏覽器默認顯示爲斜體。

如有須要，能夠在元素中添加一個超連接元素用以連接引用的原始來源。

如下例子中，是一本由 Walter Isaacson 所著的名爲 Steve Jobs 的書。咱們將書名包含在<cite>元素中，引用中設置了這本書的超連接：

<p>The book <cite><a href="http://www.amazon.com/Steve-Jobs-Walter-Isaacson/dp/1451648537">Steve Jobs</a></cite> is truly inspirational.</p>

直接引用

不少時候咱們都會在文本中引用對話或文章。這時候咱們就要應用行內元素<q>。<q>元素語義上就是引用對話或文章，因此它不該該用於其餘目的。

默認狀況下，瀏覽器在渲染這個元素時會根據全局屬性lang識別對應的語言，添加適當的引號。

示例以下：

<p>Steve Jobs once said, <q>One home run is much better than two doubles.</q></p>

間接引用

<q>元素有一個cite屬性。cite屬性的做用是引用已引用的內容的URL。這個屬性不會改變元素的外觀，但這對於屏幕閱讀器和其餘設備來講頗有用。由於這個屬性並不可見，因此最好在引用內容前前設置超連接標明來源。

示例以下：

<p><a href="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">Steve Jobs</a> once said, <q cite="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">One home run is much better than two doubles.</q></p>

直接外部引用

若是咱們要引用來自外部的多行的大塊文本，就要用到<blockquote>元素。<blockquote> 是一個塊狀元素，能夠內嵌塊狀元素，包括各級標題和段落標籤。

示例以下：

<blockquote>
  <p>&#8220;In most people&#8217;s vocabularies, design is a veneer. It&#8217;s interior decorating. It&#8217;s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.&#8221;</p>
</blockquote>

間接外部引用

較長的引用一般都會經過<blockquote>元素進行間接引用。這種引用可能會包含cite屬性和<cite>元素。

cite屬性用在<blockquote>元素中和用在<q>元素中的方法相同----以URL的形式提供引用內容的引用。<cite>元素跟在實際引用內容以後，用以標明引用內容的原始來源。

示例中HTML概述了 Fortune 雜誌中對 Steve Jobs 的一段話的引用。這段引用使用了<blockquote>元素並經過cite屬性指定了原始來源。<blockquote>元素中還嵌套了包含<a>元素的<cite>元素爲用戶提供額外的引用和參考。

<blockquote cite="http://money.cnn.com/magazines/fortune/fortune_archive/2000/01/24/272277/index.htm">
  <p>&#8220;In most people&#8217;s vocabularies, design is a veneer. It&#8217;s interior decorating. It&#8217;s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.&#8221;</p>
  <p><cite>&#8212; Steve Jobs in <a href="http://money.cnn.com/ magazines/fortune/fortune_archive/2000/01/24/272277/index.htm"> Fortune Magazine</a></cite></p>
</blockquote>