如何在CodePen上使用字体ttf

时间:2016-02-11 17:46:44

标签: css font-face

我是CSS世界的新手,我在codepen.io上练习

我想在笔上添加某种字体。我从webSite下载它,然后尝试在github上传它并使用该文件的链接,但它不起作用>,<

您可以在此处找到代码: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'
}
提前thx!

1 个答案:

答案 0 :(得分:2)

因为.ttf文件的URL是页面而不是文件路径。您必须使用字体文件的直接链接。使用此:

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

如果不起作用,您必须在其他主机中上传字体文件,然后使用它。