Font-face 在本地工作但不在服务器上工作

Question

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

@font-face { font-family: 'ocraextended'; 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: Mono spaced fonts 最初是为了机器可读的。它不是最好的人类可读字体。但是，嘿，你最清楚什么适合你的设计。

Font-face 在本地工作但不在服务器上工作

Font-face working on local but not on server

html

css

local

font-face

server