如何在HTML页面中使用自定义字体

Question

我正在努力在HTML页面中使用自定义字体。

以下是我到目前为止使用字体DENSE尝试过的HTML代码，该代码从https://www.behance.net/gallery/10231891/Dense-typeface下载，它保存在与HTML文件MyPage.html相同的文件夹中。

<!DOCTYPE html>
<html>
<head>
<style>

@font-face {
  font-family: "Dense-Regular";
  src: url("/Dense-Regular.otf");
}

.Font {
        width: 430px;
        margin: 0 auto;
        padding: 0;
        text-align: left;
        color: #cbd9ef;
        font-family: 'Dense-Regular';
        font-size: 140%;
    }


</style>
</head>
<body>

<div><p class = "Font">This is a paragraph.</p></div>

</body>
</html>

有人可以指出出什么问题吗？ 我是HTML的新手，因此对在这里可能犯的任何小错误表示歉意。

谢谢你的时间。

Answer 1

请在字体属性“ src”中删除“ /”。 应该是这样

@font-face {
  font-family: "Dense-Regular";
  src: url("Dense-Regular.otf");
}

希望这可以帮助。 通过这些链接进行参考。

https://css-tricks.com/snippets/css/using-font-face/ https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Answer 2

这个：

src: url("/Dense-Regular.otf");

需要这样的：

src: url("Dense-Regular.otf");

请注意，URL中缺少正斜杠。

Answer 3

<p class = "Font">应为<p class="Font">

编辑： MyPage.html和Dense-Regular.otf MyPage.html都在您网站的root文件夹中吗？

Answer 4

这是CSS3中的语法：

@font-face {

      font-family: font_name;

      src: location [format];

}

链接以获取详细信息：
1. http://www.brenkoweb.com/tutorials/css3/css3-font-styling/font-styling-in-css3-and-the-atfont-face-rule
2. http://www.brenkoweb.com/tutorials/css3/css3-font-styling/font-descriptors-in-css3

具体来说，结合HTML标头：

CSS

@font-face {
      font-family: 'ElegantIcons';
      src: url("fonts/elegant-icons/ElegantIcons.eot");
      src: url("fonts/elegant-icons/ElegantIcons.eot?#iefix") format("embedded-opentype"), url("fonts/elegant-icons/ElegantIcons.woff") format("woff"), url("fonts/elegant-icons/ElegantIcons.ttf") format("truetype"), url("fonts/elegant-icons/ElegantIcons.svg#ElegantIcons") format("svg");

HTML

<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>