自定义本地存储字体（开发机器和服务器端）：CSS？答案

【问题标题】：Custom Locally Stored Fonts (dev machine and server side): CSS?自定义本地存储字体（开发机器和服务器端）：CSS？
【发布时间】：2018-01-31 19:36:51
【问题描述】：

问题：

我正在尝试使用 Abadi MT Condensed Extra Bold 字体。不幸的是，我找不到任何通过 API 提供此功能的 CDN。我用来拉入字体的css代码有问题吗？我确定正在加载样式表。

上下文

当我在系统的字体册中 100% 启用该字体时，该字体有效，但在禁用/删除时无效——但我知道，期望每个用户都拥有该字体是不切实际的。因此，鉴于此，它不适用于 iPhone 或 Android 设备。

我是不是最好在 CDN 中找到一种字体，或者，是否有可能使它工作？谢谢！

代码：

****** fonts.css ********

@font-face {
    font-family: 'serif';
    src: url('../fonts/Abadi MT Condensed Extra Bold.eot');
    src: local('☺'), url('../fonts/Abadi MT Condensed Extra Bold.woff') format('woff'), url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype'), url('../fonts/Abadi MT Condensed Extra Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

***** layout.pug *******

doctype html
html(lang='en')
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
    meta(name='description', content='')
    meta(name='author', content='')
    title #{title}

    //jquery
    script(src='https://code.jquery.com/jquery-2.2.4.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js')

    //shopify
    script(src='http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js')

    //custom cart
    script(src="scripts/cart.js")

    //popper
    script(src='./vendor/popper/popper.min.js')

    //bootstrap
    script(src='./vendor/bootstrap/js/bootstrap.min.js')

    //Favicons
    link(rel='apple-touch-icon', sizes='57x57', href='/favicon/apple-icon-57x57.png')
    ......
    ......

    // Bootstrap core CSS
    link(href='vendor/bootstrap/css/bootstrap.min.css', rel='stylesheet')

    //Gliphicons had to be pulled in separately
    link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css', rel='stylesheet')

    // Custom fonts for this template
    link(href='./stylesheets/fonts.css', rel='stylesheet')

    // Custom styles for this template
    link(href='./stylesheets/template.css', rel='stylesheet')

尝试的解决方案

我已经尝试过像this 这样的解决方案。此外，我的 CSS 代码过去没有完整的 fonts.css 文件。

【问题讨论】：

我知道这是您肯定所做的事情，但如果字体没有加载，通常是因为 font-face 声明的路径错误。如果您确定不是这种情况，我们需要一个指向演示站点的实时链接，以检查它是否有所不同，但我很确定问题在于字体的路径......
你为什么要声明src 两次？使用这个语法，看看它是否适合你jsfiddle.net/m6v7xrw3
@Ihazkode 这是一个古老的做法，bulletproof method for font-face... 通常我使用类似的东西，但我不喜欢local 规则，这是我多年前停止使用的东西。 .
刚刚看了。 Chrome 60 和字体被加载和渲染。
真的吗？家庭酒吧看起来像这样？ drive.google.com/open?id=0ByloKBtIdQCJNS04SnQ2UDRFeFE

标签： css fonts

【解决方案1】：

我能够解决这个问题，并为其他有同样问题的人发帖。

我找到this blob 来帮忙

所以现在我的最终代码是

@font-face {
  font-family: AbadiBold;
  src: url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype');
  src:
          url("../fonts/Abadi MT Condensed Extra Bold.woff") format("woff"),
          url("../fonts/Abadi MT Condensed Extra Bold.otf") format("opentype"),
          url("../fonts/Abadi MT Condensed Extra Bold.svg#filename") format("svg");

  font-weight: 400;
  font-style: normal;
}

* {
  font-family: AbadiBold
}

h1, h2, h3, h4, h5, h6, .text-heading {
  font-family: AbadiBold
}

【讨论】：