【青训营】CSS（二）

/* 引入Web Fonts */
@font-face {
  font-family: "Megrim";
  src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
}
h1 {
  font-family: Megrim, Cursive;
}
复制代码

<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>
<style>
  section {
    font-size: 20px;
  }
  section h1 {
    font-size: 2em; /* 20px*2=40px */
  }
  section .note {
    font-size: 80%; /* 20px*0.8=16px */
    color: orange;
  }
</style>
复制代码

div {
  font-style: normal;
  font-style: italic;
  font-style: oblique;
  font-style: oblique 10deg;
}
复制代码

<section>
  <h1>Font families recap</h1>
  <p>As we looked at in fundamental text and font styling.</p>
</section>
<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }
  p {
    font-size: 20px;
    line-height: 3; /* 20px*3=60px */
  }
</style>
复制代码

/* font: style weight size/height family */
h1 {
  font: bold 14px/1.7 Helvetica, sans-serif;
}
/* 简略版 */
p {
  font: 14px serif;
}
复制代码

div {
  text-align: left;
  text-align: right;
  text-align: center;
  text-align: justify;
}
复制代码