Accelerated Mobile Pages 高级概念

1. 概览

本 Codelab 延续了 Accelerated Mobile Pages 基础知识中介绍的概念。在开始本实验之前，您应该已经完成了之前的 Codelab，或者至少对 AMP 的核心概念有基本的了解。

在此 Codelab 中，您将了解 AMP 如何处理广告、分析、视频嵌入、社交媒体集成、图片轮播界面等。为此，您将以“基础知识”Codelab 中的示例为基础，通过各种 AMP 组件添加这些功能。

学习内容

  • 使用 amp-ad 展示广告。
  • 嵌入 YouTube 视频、Twitter 卡片和自适应文本元素。
  • 使用 amp-carousel 构建包含图片和内容组合的轮播界面。
  • 使用 amp-analytics 的简单跟踪模式。
  • 向网页添加网站导航的方式。
  • 字体在 AMP 中的运作方式。

所需条件

  • 示例代码
  • Chrome（或可检查 JavaScript 控制台的同类浏览器）
  • Python（最好是 2.7）或 Chrome 200 OK Web Server 扩展程序
  • 代码编辑器（例如 Atom、Sublime、Notepad++）

2. 获取示例代码

您可以将所有示例代码下载到计算机上：

…或者，您也可以通过命令行克隆 GitHub 代码库：

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git

您将下载一个 ZIP 文件，其中包含多个示例资源文件和起始 article.html 页面。

解压缩该文件夹，然后通过计算机上的命令行导航到相应目录。

3. 运行示例网页

为了测试我们的示例网页，我们需要从 Web 服务器访问文件。您可以通过多种方式创建临时本地 Web 服务器以进行测试。在此 Codelab 中，我们将提供 3 种可用选项的说明：

  • Google Chrome 应用“Web Server for Chrome”- 这是推荐的方法，因为它是最简单且跨平台的解决方案。注意：此方法需要安装 Google Chrome。
  • Firebase Hosting - 如果您还想探索我们的新静态资产托管平台“Firebase Hosting”，则可以选择此选项。默认启用 SSL。
  • 本地 HTTP Python 服务器 - 需要访问命令行。

方法 1：Web Server for Chrome

您可以在 Chrome 应用商店中通过此链接找到“Web Server for Chrome”应用。

4c1bf1095afed87a.png

安装 Chrome 应用后，您必须通过“选择文件夹”按钮将该应用指向特定文件夹。在此 Codelab 中，您应选择解压缩 Codelab 示例文件的文件夹。

此外，您还应勾选“自动显示 index.html”选项，并将端口设置为“8000”。您需要重启 Web 服务器，这些更改才会生效。

通过以下方式访问此网址：

http://localhost:8000/article.amp.html

如果上述网址成功加载，您可以继续下一部分。

方案 2：Firebase Hosting

如果您有兴趣探索我们新的 Firebase 静态网站托管服务，可以按照此处提供的说明将 AMP 网站部署到 Firebase 托管网址。

Firebase Hosting 是一种静态托管服务提供商，您可以使用它快速部署和托管静态网站及其资源，包括 HTML、CSS 和 JavaScript 文件。由于静态内容缓存在内容分发网络 (CDN) 中，而该网络在世界各地都设有入网点 (PoP)，因此用户可以享受更低的延迟时间。

最后，Firebase Hosting 始终通过 SSL 提供，因此非常适合 AMP 和一般 Web。如果您更希望专注于 AMP，只需忽略此选项即可。

选项 3：HTTP Python 服务器

如果您不使用 Chrome，或者无法顺利安装 Chrome 扩展程序，也可以通过命令行使用 Python 启动本地 Web 服务器。

如需从命令行运行 Python 的内置 HTTP 服务器，只需执行以下操作：

python -m SimpleHTTPServer

并访问此网址：

http://localhost:8000/article.amp.html

4. 了解核心 AMP 组件

AMP 的组件系统使我们能够以最少的精力快速在文章中构建高效且响应迅速的功能。<head> 标记中的核心 AMP JavaScript 库包含多个核心组件：

  • amp-ad - 用于展示广告的容器。
  • amp-img - HTML img 标记的替代项。
  • amp-pixel - 用作跟踪像素，用于统计网页浏览量。
  • amp-video - HTML5 视频标记的替代项。

上述所有核心组件都可以在 AMP 文档中立即使用。我们的示例代码已在网页中使用了 amp-img，并且我们在 AMP 基础知识 Codelab 中探讨了它与 AMP 布局系统的关系，因此我们将在下一章中探讨 amp-ad！

5. 添加广告

您的示例 article.amp.html 页面应如下所示：

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "mainEntityOfPage":{
       "@type":"WebPage",
       "@id":"https://example.com/my-article.html"
     },
     "headline": "My First AMP Article",
     "image": {
       "@type": "ImageObject",
       "url": "https://example.com/article_thumbnail1.jpg",
       "height": 800,
       "width": 800
     },
     "datePublished": "2015-02-05T08:00:00+08:00",
     "dateModified": "2015-02-05T09:20:00+08:00",
     "author": {
       "@type": "Person",
       "name": "John Doe"
     },
     "publisher": {
       "@type": "Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/amptimes_logo.jpg",
         "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    </script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

上述是一个简单的网页，该网页最有趣的事实是，它通过了 AMP 验证和 Schema.org 搜索引擎元数据验证。如果此网页部署在新闻网站上，则有资格纳入专门用于显示 AMP 内容的新 Google 搜索轮播界面，因此是开展工作的绝佳起点。

在更改网页之前，我们先打开 Chrome 开发者工具。在处理网站（尤其是以移动设备为中心的网站）时，在浏览器中进行测试时模拟移动体验通常是一个好主意。首先，通过 Menu > More Tools > Developer Tools 在 Chrome 中打开开发者控制台：

efc352f418f35761.png

现在，检查开发者控制台中的 JavaScript 输出。确保您已选择“控制台”标签页：

597d53fae21a0a60.png

现在，点击开发者控制台中的设备模拟按钮。它以手机和平板电脑并排摆放的形式呈现：

46d475a36472b495.png

在随即显示的菜单中，将设备设置为“Nexus 5X”：

db6dd4ac5476eed2.png

现在，我们可以开始处理网页本身了。让我们尝试向 AMP 文章添加广告！

AMP 中的所有广告均使用 amp-ad 组件构建。使用此组件，我们可以通过多种方式配置广告，例如宽度、高度和布局模式。不过，许多广告平台都需要进行额外的配置，例如广告联盟的账号 ID、应投放的广告或广告定位选项。对于 amp-ad，我们只需以 HTML 属性的形式填写所需的各种选项。

不妨看看下面这个 Double Click 广告示例：

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

如您所见，这是一个非常简单的配置。请注意 type 属性，此属性会告知 amp-ad 组件您要使用哪个广告平台。在本例中，我们希望使用 Double Click 平台，因此类型值为 doubleclick。

data-slot 属性更具唯一性。amp-ad 中以 data- 开头的任何属性都是供应商专用属性。这意味着，并非所有供应商都一定需要此特定属性，也并非所有供应商在收到此属性后都一定会做出反应。例如，将上述 Double Click 示例与 A9 平台的测试广告进行比较：

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

尝试将上述两个示例添加到文章中的 <header> 标记之后。刷新页面，您应该会看到两个测试广告：

5dbcb01bee95147b.png

我们来了解一下可与 Double Click 搭配使用的更多选项。尝试向网页添加以下两种地理位置定位广告配置：

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

遗憾的是，地理位置定位无法通过网页本身的代码进行控制。不过，这些测试广告已在 DoubleClick 信息中心内配置为仅在特定国家/地区（具体而言是英国和美国）展示。

刷新页面，然后查看。以下屏幕截图是在澳大利亚拍摄的，因此两个广告均未加载：

c53cbc464074deab.png

上述地理位置定位示例展示了 amp-ad 的灵活性，足以支持各种广告平台功能。

目前支持的广告联盟如下：

请务必查看 AMP 广告组件的文档页面，了解最新支持的广告平台。

在下一章中，我们将探讨更高级的 AMP 组件以及如何将它们包含在 AMP 文档中。

6. 使用扩展组件扩展内容

到目前为止，您已经拥有一个基本的 AMP 文档，其中包含文字、图片，甚至还嵌入了广告。这些都是讲述故事和通过内容创收的关键要素。不过，新型网站往往包含更多功能，而不仅仅是图片和文字。

接下来，我们来进一步了解 AMP 文档，探索除前面提到的核心组件之外还有哪些组件可用。

在本章中，我们将尝试添加新闻文章中常见的更高级的 Web 功能：

  • YouTube 视频
  • Twitter 微博
  • 文章引用

嵌入 YouTube 视频

我们来尝试将 YouTube 视频嵌入到文档中。以下代码将嵌入视频，添加到您的网页中：

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

刷新页面，然后查看该页面。您应该会看到以下文字，而不是视频：“该视频无法加载。”

即使您的浏览器可以正常显示 YouTube 视频，您仍会收到此错误消息。为什么呢？视频实际上并未加载失败，而是组件本身失败了。

请注意，并非所有组件都是位于 AMP 库的核心 JavaScript 文件中。我们需要专门为 YouTube 组件添加一个额外的 JavaScript 请求。除了核心集之外的所有组件都需要这些额外的 JavaScript 引用。

将以下请求添加到 <head> 标记：

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

刷新页面，您应该会看到 YouTube 视频：

be536b1d0f366e27.png

我们再次指定了视频的宽度和高度，以便 AMP 布局系统计算宽高比。此外，布局类型已设置为自适应，这意味着此视频将填充其父元素的宽度。

详细了解 YouTube 组件。

显示推文

在新闻报道中嵌入来自 Twitter 的预格式化推文是一项常见功能。AMP Twitter 组件可以轻松提供此功能。

首先，将以下 JavaScript 请求添加到文档的 <head> 标记中：

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

现在，在您的文章中添加以下代码以嵌入推文本身：

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

data-tweetid 属性是特定平台供应商要求提供的自定义属性的另一个示例。在这种情况下，Twitter 会将 data-tweetid 属性识别为与要嵌入到网页中的特定推文相对应。

刷新浏览器，然后查看页面。您应该会看到相应推文：

b0423604fdf85209.png

详细了解 Twitter 组件。

突出显示文章中的引用内容

新闻报道中一个常见的元素是突出显示文章中特别引人入胜的文字片段。例如，为了吸引读者的注意力，您可能会以较大字体重复显示特定来源的引文或重要事实。

不过，由于并非所有引用或文本片段的字符串字符长度都相同，因此很难平衡较大的字体大小与特定文本在网页上占用的空间量。

AMP 包含另一个专门用于这种情况的组件，称为 amp-fit-text。它允许您定义固定宽度和固定高度的元素以及最大字号。该组件会智能缩放字体大小，以使引用的文字适应可用的宽度和高度。

我们来试一试。首先，将组件的库添加到 <head> 标记中：

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

将以下内容添加到您的网页：

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

刷新页面，然后查看结果！

现在，进一步开展实验。如果所引用的内容很短，会出现什么情况？

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  #YOLO
</amp-fit-text>

或者，如果引用内容较长，该怎么办？

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon's that is dreaming, And the lamp-light o'er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

作为 amp-fit-text 的最后一次实验，请尝试创建一个高度大得多的短文本（例如 #YOLO，高度值为 400），同时保持 max-font-size 属性值为 42。最终网页会是什么样子？文本是否垂直居中，或者 amp-fit-text 标记的身高是否会缩小以适应全速字体大小？在编辑文档之前，请根据您对 AMP 布局系统的了解尝试回答问题！

7. 复杂轮播界面

Web 开发中的另一项常见功能是轮播界面。AMP 包含一个旨在满足此需求的通用组件。我们先从一个简单的示例开始，例如图片轮播。

请务必添加轮播界面组件库，方法是将以下 JavaScript 请求添加到文档的 <head> 标记中：

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

接下来，我们将嵌入一个简单的图片轮播界面，该界面采用自适应布局，并具有预定义的宽度和高度。将以下内容添加到您的网页：

<amp-carousel layout="fixed-height" height="168" type="carousel" >
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

刷新页面，您应该会在页面中看到一个轮播界面：

b55c8919ac22396f.png

轮播界面组件可以通过多种方式进行配置。尝试将类型更改为 slides，然后查看结果。请务必将 amp-carousel 的 layout 属性及其内部图片的 layout 属性也更改为 responsive。

现在，您将一次看到一个元素，而不是滚动式元素列表。尝试横向滑动以浏览各个元素。如果您滑动到第三个元素，将无法再继续滑动。

接下来，添加 loop 属性。刷新页面，然后立即尝试向左滑动。轮换展示内容即会无休止地循环展示。

最后，我们让此轮播图以每 2 秒一次的速率自动播放。向网页添加 autoplay 属性和延迟属性，并将延迟属性的值设为 2000，如下所示：delay="2000"。

最终的结果应该会大致如下所示：

<amp-carousel layout="responsive" width="300" height="168" 
         type="slides" autoplay delay="2000" loop>
  <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>

刷新页面，然后试试看！

图片轮换展示看起来非常不错，但如果我们想让轮换展示中出现更复杂的内容，该怎么办呢？让我们尝试将广告、一些文字和一张图片一起放在单个轮播广告中，让效果更丰富。amp-carousel 真的能同时处理好这种组合中的所有内容吗？当然。

首先，我们向网页添加此样式，以确保 amp-fit-text 和 amp-carousel 组件能够安全地协同工作：

amp-fit-text {
    white-space: normal;
}

现在，尝试将以下轮播界面代码放入您的网页中：

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

    <amp-ad width="300" height="250"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>This advert is still loading.</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Big, bold article quote goes here.
    </amp-fit-text>
</amp-carousel>

刷新页面，您应该会看到如下内容：

1c92ba4977b3c6d1.png

a1b05df74f023f25.png

详细了解轮播组件。

8. 使用 AMP 分析进行跟踪

分析平台通常通过内嵌 JavaScript 代码段和函数调用集成到网站中，这些代码段和函数调用会触发事件，然后将事件发送回分析系统。AMP 提供了灵活的 JSON 配置语法，以便为多个分析合作伙伴复制此过程。

以下是传统 JavaScript 驱动的 Google Analytics 跟踪的示例，我们将以 amp-analytics 的 JSON 格式重写该示例。首先是传统的 JavaScript 方法：

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

上述代码非常简单，它会发送通知以跟踪网页浏览事件。

如需在 amp-analytics 组件中复制上述所有内容，我们首先要在文档的 <head> 中添加该组件库：

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

然后，我们按如下方式包含该组件：

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

这看起来可能更复杂，但实际上是一种非常灵活的格式，可用于描述多种不同类型的事件。此外，JSON 格式不包含传统示例中的 JavaScript 代码 blob，如果意外更改，可能会导致错误。

在 JSON 格式中，触发器键包含一组键，这些键表示我们将跟踪的所有事件触发器，这些触发器的键是事件的说明，例如上例中的“默认网页浏览”。标题键值与正在查看的网页的名称相关。

扩展上述示例，我们可以添加另一个触发器“点击 #header 触发器”：

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

此触发器顾名思义，通过使用 DOM 选择器“#header”，我们可以查询 ID 为“header”的代码，并在设备上“点击”或点按该代码时，向分析平台发送类别标签为“examples”的事件操作“clicked-header”。

如果您有想要集成的自定义跟踪平台，仍然可以使用 amp-analytics，并为跟踪信息定义自己的个性化网址端点。如需详细了解 amp-analytics 组件，请点击此处！

9. 浏览您的网站

移动网站的一项常见要求是包含网站导航菜单。这些菜单形式各异。以下是一些示例，说明了如何在 AMP 文档中呈现导航：

  1. 链接回首页 - 最简单的选择。
  2. 通过轮播组件实现的子标题菜单。

首页链接

让用户访问网站常规导航选项的最简单方法就是将他们引导回常规网站界面！

尝试向 <header> 标记添加以下 HTML 链接：

<header>
  <a href="homepage.html">
    <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
  </a>

  News Site
</header>

然后，将以下规则添加到内嵌 CSS 中：

.home-button {
  float: left;
}

现在刷新页面。您应该会在页面左上角看到一个指向 homepage.html 的链接 - 如果您点击此链接，很快就会发现它无法打开任何网页。

c856bc8d86acb31c.png

您可以将此链接替换为您网站首页的网址，以便用户通过常规网站的导航功能前往您网站的其他部分。

如上所述，这是最简单的方法，即利用您现有的网站导航。接下来，我们将探讨两种替代方案。

副标题菜单

解决此问题的另一种方法是在 AMP 文档中显示网站的导航菜单。为了将菜单限制在页面的一个小部分中，我们可以使用轮播界面在网站标题下方显示可滚动的菜单。

由于我们需要轮播界面组件，因此请务必将该组件的 JavaScript 添加到网页的 <head> 代码中：

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

不妨尝试在 <header> 标记下方添加以下 HTML 代码段：

...
</header>
<div class="sub-menu">
  <amp-carousel layout="fixed-height" height="38" type="carousel">
    <a href="#example1">Example 1</a>
    <a href="#example2">Example 2</a>
    <a href="#example3">Longer Named Example 3</a>
    <a href="#example4">Example 4</a>
    <a href="#example5">Example 5</a>
    <a href="#example6">Example 6</a>
  </amp-carousel>
</div>
<article>
...

然后，将以下规则添加到内嵌 CSS 中：

.sub-menu {
  background: black;
}

.sub-menu a {
  display: block;
  background: tomato;
  margin: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

现在刷新页面。您应该会在文章标题下方看到一个链接菜单。此菜单可以水平滚动，以存储许多导航链接。

cc548326befbbb0e.png

这种子菜单导航功能非常适合存储大量链接，而不会占用页面上过多的空间。

10. 添加字体

如前所述，AMP 文档中不允许有外部样式表请求。不过，此规则有一个例外：字体。

字体是网络用户文章阅读体验的重要组成部分，由于网络浏览器通过外部样式表请求获取字体文件，因此必须在 AMP 中排除这些字体文件。

我们来尝试添加对 Raleway 字体的引用：

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">

现在，更新您的 CSS 以包含对 Raleway 的引用：

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

刷新页面，查看页面的新外观。另请检查验证器的输出，您会发现没有与此外部请求相关的投诉。

11. 恭喜！

您已完成高级 AMP Codelab，并成功探索了 AMP 的多个重要组成部分！

希望您现在已经清楚了解如何使用 amp-ad 和 amp-analytics 来支持各种不同的广告平台和分析供应商。请务必探索可用的 AMP 组件的完整列表。

以下是一些其他主题和链接，您不妨探索一下，以便进一步提升技能！