Question

好的，所以我有一个字体，我用于我页面上的所有内容（除了徽标）

* {
    margin: 0;
    padding: 0;
    font-family: 'Titillium Web', sans-serif;
}

现在我想在另一段文字上应用不同的字体，但不能取代原来的字体

<h1 style='font-family: "Aref Ruqaa", serif;'>Logo Text</h1>

TLDR：如何在H1上应用不同的字体？我尝试使用font-family initial然后设置不同的字体，但没有任何效果。

示例：http://codepen.io/anon/pen/BQOaXo

Answer 1

将类添加到html 元素，确保在全局字体之后加载这些类。

避免使用内联样式。

＆＃13;

@font-face {
  font-family: 'Yrsa';
  font-style: normal;
  font-weight: 400;
  src: local('Yrsa'), local('Yrsa-Regular'), url(https://fonts.gstatic.com/s/yrsa/v1/HvXbkSMs7hgg2r-HiCNOmA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: local('Indie Flower'), local('IndieFlower'), url(https://fonts.gstatic.com/s/indieflower/v8/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
body {
  background: #111;
  color: #999;
  text-align: justify;
  text-justify: inter-word;
  max-width: 80%;
  margin: 10%
}
* {
  font-family: 'Yrsa';
}
.other {
  font-family: 'Indie Flower';
}

＆＃13;

<body>
  <div>
    <h1>This is a Header 1 in font A</h1>
    <h1 class="other">This is a Header 1 in font B</h1>
    <h2>This is a Header 2 in font A</h2>
    <h2 class="other">This is a Header 2 in font B</h2>
    <h3>This is a Header 2 in font A</h3>
    <h3 class="other">This is a Header 2 in font B</h3>
    <p>This is a paragraph using font A
      <br>Lorem ipsum dolor sit amet, in eam simul nostrud definiebas, mea iusto placerat prodesset ei. Eum summo audiam ea. Vitae aperiri at duo. Vis atomorum partiendo id, nam ea noluisse platonem. Nec minimum consequat cu, pri in harum moderatius. Ferri
      aperiam forensibus an nam.</p>
    <p class="other">This is a paragraph using font B
      <br>Lorem ipsum dolor sit amet, in eam simul nostrud definiebas, mea iusto placerat prodesset ei. Eum summo audiam ea. Vitae aperiri at duo. Vis atomorum partiendo id, nam ea noluisse platonem. Nec minimum consequat cu, pri in harum moderatius. Ferri
      aperiam forensibus an nam.</p>
  </div>
</body>

＆＃13;

Answer 2

只需在CSS中使用它：

h1{
  font-family: 'Aref Ruqaa', sans-serif;
}

http://codepen.io/anon/pen/mOGybb

Answer 3

我认为你改变了全局字体，你在css文件中使用这个语法：

h1 {font-family：Aref Ruqaa，sans-serif; }

改变全局字体

3 个答案: