离子 4 和 --ion-font-family

Posted 2023-03-06

【中文标题】离子 4 和 --ion-font-family

【英文标题】：ionic 4 and --ion-font-family

【发布时间】：2019-12-31 21:22:44

【问题描述】：

我想在 ionic 4 中添加新字体，但我对 --ion-font-family 有一个奇怪的问题。

步骤： 1：我在 assets/font 文件夹中下载并设置了自定义字体 Roboto-Light

2：我用下面的代码更新了 variables.css

@font-face font-family: '机器人灯'; src: url('../assets/font/Roboto-Light.ttf') 格式('truetype'); 字体粗细：正常； 字体样式：正常；

--ion-font-family: "Roboto" , "Helvetica-Neue", "sans-serif", "Roboto-Light" !important;

我使用谷歌检查器发现默认使用的离子字体是“Roboto”、“Helvetica-Neue”、“sans-serif”。 好的。 现在 font-family 使用了一个后备策略。 也就是先尝试，如果浏览器不支持，再尝试下一个，以此类推。

所以现在，我的问题： 如果 a 在 --ion-font-family 的末尾有“Roboto-Light”，则不应在主要字体中使用它！ 就是这样……

我真的不明白，任何帮助将不胜感激！

【参考方案1】：

我不确定这是否是完整的解决方案，但您的 css 有错误：

--ion-font-family: "Roboto" , "Helvetica-Neue", "sans-serif", "Roboto-Light" !important;

generic-family 应该始终排在最后：

--ion-font-family: "Roboto" , "Helvetica-Neue", "Roboto-Light", sans-serif !important;