Question

我正在为学校建立一个网站，并希望使用特殊字体，但是在导入它时，它没有显示该字体。我尝试使用@face-font{font-family: something; src: url(font.ttf);的css看起来像这样：header{font-family: something;}而且我也使用.otf文件尝试了此操作，但是那也不起作用。我还尝试了<link ref="font" href="font.ttf">以及.otf文件。但在某些情况下，字体没有显示出来。是我在某些代码中的错，还是字体不可用？字体的链接是：http://www.fontspace.com/darrell-flood/quiet-meows

Answer 1

注意：如果字体系列的名称不止一个单词，则它必须用引号引起来，例如：“ Times New Roman”。

   <style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

@font-face {
   font-family: myFirstFont;
   src: url(sansation_bold.woff);
   font-weight: bold;
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>

Answer 2

要包含自定义字体，您需要在CSS中的某个位置使用该字体：

@font-face {
      font-family: 'QuietMeows';
      src: url('../fonts/quiet_meows.ttf')  format('truetype'),
           url('../fonts/quiet_meows.otf')  format('opentype');
}

下载字体后，需要将其移至项目中，然后将其放入fonts文件夹中，并重命名为quiet_meows。

然后您可以像这样在CSS中使用它：

p {
    font-family: 'QuietMeows';
}

Answer 3

通过添加格式标签已解决了该问题。之后，该字体确实显示在页面上。结束看起来像这样。

@font-face{
    font-family: "quiet meows";
    src: url('font.ttf') format('truetype');
}

如何在html / css中使用字体

3 个答案: