字体家族占位符 ion-input Ionic5

Question

我正在尝试更改 <ion-input> 的 placeholder 的字体系列。
在 docs 中，没有办法做到这一点，因为占位符的唯一可能选项是 --placeholder-color、--placeholder-font-style、--placeholder-font-weight 和 --placeholder-opacity。
这是 HTML:

<ion-input required 
           type="text" 
           maxlength="30"
           placeholder="Your username">
</ion-input>

我已经尝试过但没有成功的：

ion-input::placeholder {
  font-family: 'My-font', sans-serif;
  --ion-font-family: 'My-font', sans-serif;
}

我尝试用 ::-webkit-input-placeholder、:-ms-input-placeholder、:-moz-placeholder 替换 ::placeholder。
我想达到的目标：

ion-input {
  --placeholder-font-family: 'My-font', sans-serif;
}

Answer 1

占位符字体只是继承自输入字体。如果您的输入字体和占位符字体可以相同，那么只需将 css 样式应用于您的输入元素。

ion-input {
  --ion-font-family: 'My-font', sans-serif;
}

字体家族占位符 ion-input Ionic5

Font-family placeholder ion-input Ionic5

ionic-framework

styling

font-family