我有一个名为 FuturaPT 的字体,我想将此字体用于我的购物车,
这是我添加到我的购物车模块 css 的内容
@font-face {
font-family: 'FuturaPT-Book';
src: url('../fonts/FuturaPT-Book.eot');
src: url('../fonts/FuturaPT-Book.woff2') format('woff2'),
url('../fonts/FuturaPT-Book.woff') format('woff'),
url('../fonts/FuturaPT-Book.ttf') format('truetype'),
url('../fonts/FuturaPT-Book.svg#FuturaPT-Book') format('svg'),
url('../fonts/FuturaPT-Book.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
CSS
h1{
font-size: 36px;
font-family: "FuturaPT-Book";
}
检查 chrome 开发网络我可以看到字体已加载但我的 h1 没有变化,
这是在 prestashop 中添加自定义字体的正确方法吗?
最佳答案
要在 Prestashop
中添加自定义字体,您可以注册您的 fonts.css
以加载您的自定义字体并在 custom.css
中添加您的 css文件。
按照下面提到的步骤;
1) 通过在 assets
css
主题/{your_theme}/config/theme.yml
assets:
css:
all:
- id: fonts
path: assets/css/fonts.css
priority: 30
2) 在 themes/{your_theme}/assets/css
下创建文件 fonts.css
并添加以下代码。
主题/{your_theme}/assets/css/fonts.css
@font-face {
font-family: 'FuturaPT-Book';
src: url('../fonts/FuturaPT-Book.eot');
src: url('../fonts/FuturaPT-Book.woff2') format('woff2'),
url('../fonts/FuturaPT-Book.woff') format('woff'),
url('../fonts/FuturaPT-Book.ttf') format('truetype'),
url('../fonts/FuturaPT-Book.svg#FuturaPT-Book') format('svg'),
url('../fonts/FuturaPT-Book.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
3) 现在,要加载您的 css
文件,您需要删除文件 config/themes/{your_theme}/shop1.json
( Reference )
4) 在themes/{your_theme}/assests
下创建fonts
文件夹,并将与字体相关的所有文件添加到此文件夹中。
5) 将您的css
添加到custom.css
文件
主题/{your_theme}/assets/css/custom.css
h1 {
font-size: 36px;
font-family: "FuturaPT-Book";
}
如果这不起作用,请提供如下重要
;
h1 {
font-size: 36px !important;
font-family: "FuturaPT-Book" !important;
}
完成所有这些更改后,检查您的商店。
希望这对您有所帮助!
关于css - 如何在 prestashop 中添加自定义字体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52507150/