html - 字体在本地工作但在服务器上不起作用

Question

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

@font-face { 字体系列:'ocraextend'； src: url('font/OCRAEXT.ttf') format('truetype'); }

Answer 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:等宽字体最初是为了机器可读而设计的。它不是最好的人类可读字体。但是，嘿，您最了解什么适合您的设计。