ionic 4 和 --ion-font-family

Question

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

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

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

  @font-face { 字体系列：'Roboto-Light'； src: url('../assets/font/Roboto-Light.ttf') 格式('truetype'); 字体粗细：正常； 字体样式：正常； }

  --ion-font-family：“Roboto”、“Helvetica-Neue”、“sans-serif”、“Roboto-Light”！重要；

我使用谷歌检查器来发现默认使用的离子字体，它是“Roboto”，“Helvetica-Neue”，“sans-serif”。 好的。 现在字体系列使用后备策略。 也就是说，它会尝试第一个，如果浏览器不支持，它会尝试下一个，依此类推。

现在，我的问题是： 如果 --ion-font-family 末尾有“Roboto-Light”，则不应在主要字体处采用它！ 事实也是如此...

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

Answer 1

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

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

通用家族应该总是放在最后：

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

Answer 2

我可能来不及回答了，但是对于那些遇到同样问题的人，我通过添加额外的“font-family”标签设法解决了同样的问题。所以 CSS 看起来像：

/* Apply the global font style */
body {
    font-family: 'MyFont', Arial, sans-serif !important;
    --ion-font-family:: 'MyFont', Arial, sans-serif !important;
}