Question

这是我的页面：

<!DOCTYPE html>
<html>
  <style>
  @font-face {
    font-family: 'bariol Regular'; /*a name to be used later*/
    src: url('Bariol.ttf'); /*URL to font*/
  }
  </style>
  <body>

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>

  </body>
</html>

我下载了一个名为 Bariol.ttf 的字体文件，并将其放在与此HTML文件相同的文件夹中。

我检查了萤火虫，字体＆＃39; bariol regular＆＃39; 没有得到应用。

为什么？

Answer 1

这是您必须制作的html和css格式

<强> HTML

<p>
This is bariol font
</p>

<强> CSS

@font-face {
    font-family: 'bariol_regularregular';
    src: url('../fonts/bariol_regular-webfont.eot');
    src: url('../fonts/bariol_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bariol_regular-webfont.woff2') format('woff2'),
         url('../fonts/bariol_regular-webfont.woff') format('woff'),
         url('../fonts/bariol_regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

body{
  font-family: 'bariol_regularregular';
}

我在dropbox上传文件的链接只是下载它们并将其放在css文件夹旁边的fonts文件夹中

bariol_regular-webfont.eot：https://www.dropbox.com/s/wechtcmqoqwirti/bariol_regular-webfont.eot?dl=0

bariol_regular-webfont.ttf：https://www.dropbox.com/s/ms2upt51n9uuond/bariol_regular-webfont.ttf?dl=0

bariol_regular-webfont.woff：https://www.dropbox.com/s/dfeuybbqzisl94m/bariol_regular-webfont.woff?dl=0

bariol_regular-webfont.woff2：https://www.dropbox.com/s/ez55wodao53xhqe/bariol_regular-webfont.woff2?dl=0

上传所有必需的文件，你需要下载它们并将它放在css文件夹旁边的fonts文件夹中，并在你的css文件中调用上面的css

Answer 2

因为没有 Web开放字体格式（WOFF）文件

字体实现

2 个答案: