字体在本地工作但不在服务器上答案

【问题标题】：Font-face working on local but not on server字体在本地工作但不在服务器上
【发布时间】：2017-10-11 10:33:10
【问题描述】：

就像标题一样，font-face 不能在互联网上工作，但它在本地工作，我不明白为什么。有人能帮我吗？这是我的代码：

@font-face { font-family: 'ocraextended'; src: url('font/OCRAEXT.ttf') format('truetype'); }

【问题讨论】：

Google/Firefox 开发者控制台有错误吗？检查开发人员控制台上的网络选项卡以了解字体加载的 HTTP 状态代码，或者如果您不熟悉该选项卡，请发布该选项卡的屏幕。或者简单地说，发布您网站的网址。

标签： html css server font-face local

【解决方案1】：

如果您在 PC 或 Mac 上安装了该字体，它将显示在您的浏览器中，但不会在未安装的系统上显示。您必须将不同的字体文件与您的网页一起上传，并在 css 中引用这些字体文件。

例子：

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

另一种选择是使用 Google 字体。它免费且易于使用（跨浏览器兼容，无需大量文件和字体格式）：

在 HTML 中

<link href="https://fonts.googleapis.com/css?family=Overpass+Mono" rel="stylesheet">

或在 CSS 中

@import url('https://fonts.googleapis.com/css?family=Overpass+Mono');

然后你让一个html元素使用这样的字体：

h1 {font-family: 'Overpass Mono', monospace;}

PS：单行距字体最初是为机器可读而设计的。这不是最好的人类可读字体。但是，嘿，你最清楚什么最适合你的设计。

【讨论】：