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

前端之家收集整理的这篇文章主要介绍了css – 在Shopify液体中使用@ font-face时的字体文件404前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我查看了我在这里和Shopify论坛上发现的所有帖子,并尝试了一些不同的东西,但遗憾的是无法解决我的问题.我正在Shopify开发商店使用Shopify主题编辑器应用程序和Sublime文本进行开发.

在我的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;
}

我在主题的’assets’文件夹中列出了所有列出的字体文件,文件名和扩展名都正确.

我正在使用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标签格式正确,字体文件应该在哪里,所以生成文件路径应该是正确的,但似乎不是是.如果有人能够对此有所了解,我将永远感激不尽!干杯!

解决方法

经过2天的撕裂,我听到了这个,最终修复它的是改变字体的文件名并从中删除所有连字符.所以@ font-face css会改变:
@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.svg#gothambook' | asset_url }} ') format('svg');
    font-weight: normal;
    font-style: normal;
}

对此:

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

一旦我对Shopify主题的assets文件夹中的font.scss.liquid文件进行了这些更改,字体开始加载并按原样显示.

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

原文链接:https://www.f2er.com/css/215879.html

猜你在找的CSS相关文章