字体实现

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 文件相同的文件夹中。

我检查了 firebug，字体 'bariol regular' 没有被应用。

为什么？

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

All the required files are uploaded you need to download them and place it in fonts folder next to css folder and call the above css in your css file

Answer 2

因为没有 Web 开放字体格式 (WOFF) 文件

字体实现

Font Implementation

html

css

fonts

stylesheet

custom-font