css - 我对 CSS font-face URL 做错了什么？

Question

我试图让这个字体“Albermarle Swash”出现，但在互联网上搜索答案后我找不到任何答案。有人知道我做错了什么吗？我正在使用 Chrome，在 FF 和 IE 上试过，但还是不行。

@font-face { 
  font-family: 'AlbermarleSwash';
  src: url('http://ensabahone.000webhostapp.com/fonts/AlbemarleSwash.ttf') format('truetype');
}

h1 {
  font-family: 'AlbermarleSwash';
}

http://jsfiddle.net/6vURk/11/

我也试过，但没有成功:

<link href='http://ensabahone.000webhostapp.com'; rel='stylesheet' type='text/css'>

Answer 1

是的，存在跨源问题，您还需要将字体转换为网络字体以更好地支持所有设备，您可以通过https://transfonter.org/

@font-face {
    font-family: 'Albemarle Swash';
    src: url('AlbemarleSwash.eot');
    src: url('AlbemarleSwash.eot?#iefix') format('embedded-opentype'),
        url('AlbemarleSwash.woff2') format('woff2'),
        url('AlbemarleSwash.woff') format('woff'),
        url('AlbemarleSwash.ttf') format('truetype'),
        url('AlbemarleSwash.svg#AlbemarleSwash') format('svg');
    font-weight: normal;
    font-style: normal;
}