Magento 字体
Magento已经提供了一组默认字体,但您也可以管理自己来包含一些自定义字体。在本文中,我们将指导您如何在Magento主题中添加本地存储的自定义字体。
为了保持自定义的稳定性并确保新的升级不会覆盖自定义,不应该修改默认的Magento主题文件。主题的样式表必须是定制字体的地方。
如何在Magento 2中包含自定义字体
1.插入字体文件到您的本地主题目录:
1 | app/design/frontend/<your_vendor_name>/<your_theme_name>/web/fonts |
2.如果您可能通过Magento UI库构建主题,可以通过添加mixin来声明字体,.lib-font-face
写入到文件 app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/source/_typography.less
:
1 2 3 4 5 6 | .lib-font-face( @family-name:'<any_font_name>', @font-path: '@{baseDir}fonts/<path_to_font_file>', @font-weight: <font_weight>, @font-style: <font_style> ); |
包含字体的CSS是由mixin生成的。下面的例子展示了如何在空白主题中为Montserrat字体生成CSS的一些基本步骤:
1 2 3 4 5 6 7 | @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat/light/montserrat-300.eot'); src: url('../fonts/montserrat/light/montserrat-300.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat/light/montserrat-300.woff2') format('woff2'), url('../fonts/montserrat/light/montserrat-300.woff') format('woff'), url('../fonts/montserrat/light/montserrat-300.ttf') format('truetype'), url('../fonts/montserrat/light/montserrat-300.svg#Montserrat') format('svg'); font-weight: 300; font-style: normal } |