Question

我已经查看了我在这里和Shopify论坛上发现的所有帖子，并尝试了一些不同的东西，但遗憾的是，我们无法解决我的问题。我正在使用Shopify主题编辑器应用程序和Sublime文本在Shopify开发商店开发。

在我的Shopify主题中，我在styles.css.liquid文件中使用@ font-face来加载自定义字体：

@font-face {
    font-family: 'gotham-book';
    src: url(' {{ 'gotham-book-webfont.eot' | asset_url }} ');
    src: url(' {{ 'gotham-book-webfont.eot?#iefix' | asset_url }} ') format('embedded-opentype'),
    url(' {{ 'gotham-book-webfont.woff2' | asset_url }} ') format('woff2'),
    url(' {{ 'gotham-book-webfont.woff' | asset_url }} ') format('woff'),
    url(' {{ 'gotham-book-webfont.ttf' | asset_url }} ') format('truetype'),
    url(' {{ 'gotham-book-webfont.svg#gothambook' | asset_url }} ') format('svg');
    font-weight: normal;
    font-style: normal;
}

我在主题资源中列出了所有列出的字体文件，以及正确的文件名和扩展名。文件夹中。

我正在使用font-family加载所需的字体，仍然在styles.css.liquid中，例如：

.some-element {
    font-family: 'gotham-book', Helvetica, Arial, sans-serif;
}

问题是当我加载页面时，没有加载字体。当我在Chrome开发工具中检查页面时，它向我显示正在查找字体文件但未找到，例如：

GET http://cdn.shopify.com/s/files/1/0924/9286/t/3/assets/gotham-book-webfont.ttf?13846384044068149085 404 (Not Found)

字体文件在本地页面上加载正常，据我所知，我的asset_url标签格式正确，字体文件应该是它们的位置，因此生成的文件路径应该是正确的，但不是＆＃ 39;似乎是。如果有人能够对此有所了解，我将永远感激不尽！干杯！

Answer 1

经过2天的撕裂，我听到了这一点，最终修复它的是改变字体的文件名并从中删除所有连字符。所以@ font-face css会改变：

val propertyChangeListener = new PropertyChangeListener {
  override def propertyChange(evt: PropertyChangeEvent): Unit = {

    val dataItemOldValue = evt.getOldValue.asInstanceOf[DataItemValue]
    val dataItemNewValue = evt.getNewValue.asInstanceOf[DataItemValue]

    dataItemOldValue.getValue.asBoolean() shouldBe true
    dataItemNewValue.getValue.asBoolean() shouldBe true

    println(dataItemOldValue.getValue.getType)

    println(s"new Value ${evt.getNewValue}")
    println(evt.getOldValue)
  }
}

对此：

@font-face {
    font-family: 'gotham-book';
    src: url(' {{ 'gotham-book-webfont.eot' | asset_url }} ');
    src: url(' {{ 'gotham-book-webfont.eot?#iefix' | asset_url }} ')     format('embedded-opentype'),
    url(' {{ 'gotham-book-webfont.woff2' | asset_url }} ') format('woff2'),
    url(' {{ 'gotham-book-webfont.woff' | asset_url }} ') format('woff'),
    url(' {{ 'gotham-book-webfont.ttf' | asset_url }} ') format('truetype'),
    url(' {{ 'gotham-book-webfont.svg#gothambook' | asset_url }} ') format('svg');
    font-weight: normal;
    font-style: normal;
}

一旦我对Shopify主题资源文件夹中的字体文件和styles.scss.liquid文件进行了这些更改，字体开始加载并按原样显示。

我不记得在Shopify文档中有关资产文件命名约定的任何地方阅读任何内容，所以希望这可以节省某些人将来的时间！

在Shopify液体中使用@ font-face时的字体文件404

1 个答案: