如何在 CodePen 上使用 ttf 字体

Question

我是 CSS 世界的新手，我正在 codepen.io

上练习

我想在我的笔中添加某种字体。我从网站下载它，然后尝试将它上传到 github 并使用 link 到该文件，但它不起作用 >,<

您可以在此处找到代码：http://codepen.io/Koop4/pen/mVaOLG

或阅读以下内容：

<body>
  <h1>Hello World</h1>
</div>
</body>

html,
body {
  height: 100%;
  background-image: linear-gradient(to bottom, #0B88FF, #95EEFF);
}

@font-face {
  font-family: 'superMario';
  src: url('https://github.com/koop4/FreeCodeCamp/blob/master/portfolio/font/prstart.ttf');
}

h1,
h2,
h3 {
  font-family: 'superMario'
}

提前谢谢！

Answer 1

因为.ttf文件的URL是一个页面而不是文件路径。必须使用字体文件的直接link。使用这个：

@font-face {
  font-family: 'superMario';
  src: url('https://raw.githubusercontent.com/koop4/FreeCodeCamp/master/portfolio/font/prstart.ttf');
}

如果不行你必须在其他主机上传字体文件然后使用它。

如何在 CodePen 上使用 ttf 字体

How to use a font ttf on CodePen

css

font-face