Question

我想将字体bmI0GxZww8t20K342Lco0g.woff2用于classd，但它不是以该字体呈现;我做错了什么？

<html> 
<head>
<style>
.classa {color:blue}
.classb {font-family:Arial, Helvetica, sans-serif; color:blue} 
.classc {
    font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif;
    font-size: 30px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 15.3999996185303px;
    color:blue;
}
.classd @font-face {
    font-family: MyFont;
    src:
        url('bmI0GxZww8t20K342Lco0g.woff2') format('woff2'),
        url('bmI0GxZww8t20K342Lco0g.woff') format('woff');
}
<link rel="stylesheet" type="text/css" href="csss.css">

</style>
</sead>
<h1 class="classa">Bro This Is Blue.</h1> 
<h1 class="classb">Bro This Is Blue.</h1> 
<h1 class="classc">Bro This Is Blue.</h1> 
<h1 class="classd">Bro.</h1> 
</html>

Answer 1

把它放到样式部分：

@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 400;
  src: local('Jura Regular'), local('Jura-Regular'), url(http://fonts.gstatic.com/s/jura/v7/bmI0GxZww8t20K342Lco0g.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

和.classd

font-family: "Jura", sans-serif;

Answer 2

@ font-face声明应该与类规则分开。基本上，它会将您的字体添加到可用于设置元素样式的可用字体系列列表中。一旦声明了字体，就可以应用您选择的字体系列名称.classd

@font-face {
    font-family: MyFont;
    src:
        url('bmI0GxZww8t20K342Lco0g.woff2') format('woff2'),
        url('bmI0GxZww8t20K342Lco0g.woff') format('woff');
}

.classd {
    font-family: MyFont;
}

根据字体文件的存储位置，您可能还需要编辑字体网址以确保它们指向正确的位置。

Answer 3

由于您已经要求逐步执行此操作;

在IDE（Notepad ++ / Dreamweaver）上复制/粘贴以下代码，将其另存为jura.css文件。

   @font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 400;
  src: local('Jura Regular'), local('Jura-Regular'), url(http://fonts.gstatic.com/s/jura/v7/TTP6pkLK4ssO46rAsyf3PA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

以上字体位于http://conieco.com.mx/conieco_files/css

打开您的html文件并将jura.css文件包含为

 <link rel = "stylesheet" href= "jura.css" />

如果文件jura.css在另一个文件夹中但与html文件位于同一目录中，请使用此文件;

<link rel = "stylesheet" href= "CSS/jura.css" />

如果jura.css文件位于先前存储的路径中的另一个文件夹中，则;

<link rel = "stylesheet" href= "../CSS/jura.css" />

现在你可以简单地使用字体;

.classd 
   {
    font-family: Jura;
   }

注意：<link/>标记位于<head></head>标记内。

Fiddle

为什么我的首选CSS字体没有被使用？

3 个答案: