远程使用 ttf 的字体答案

【问题标题】：Font-face using ttf remotely远程使用 ttf 的字体
【发布时间】：2016-08-24 19:49:21
【问题描述】：

我有一些代码用于使用 Code39r.ttf 字体创建条形码。

在我的本地机器上使用它似乎工作正常

<html>

<head>

<style>

@font-face {
   font-family:code;
   src: url(Code39r.ttf);
}

#myFont {
   color:#111111;
   font-size:180px;
   font-family:code;
}

</style>

</head>

<body>

    <p id="myFont">123 456</p>

</body>
</html>

当我尝试从在线资源加载字体时，它似乎永远不会加载

https://jsfiddle.net/jhc7p69p/2/

不知道可能出了什么问题或是否有原因

【问题讨论】：

如果它在您的本地机器上工作正常，那么它可能是您在服务器上的字体文件所在的位置。显然 CSS 没有找到它
如果我将 JFiddle 中使用的 usrl 复制到浏览器中，它会下载字体，那么是什么原因导致找不到它
这里是个好地方：css-tricks.com/snippets/css/using-font-face

标签： html css truetype

【解决方案1】：

您使用自定义字体，您需要更多字体文件。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

【讨论】：

这无济于事，因为我只有一个 ttf 文件
其他文件生成器上线
我不确定你的意思
好的，我使用 fontsquirrel 创建了新的字体类型 woff 和 woff2 并将它们加载到我的服务器并更新了我的 JSFiddle jsfiddle.net/jhc7p69p/2 它似乎仍然不起作用
阻止加载混合活动内容“shoepack.com/resources/code39azalea.woff”