字体家族占位符离子输入 Ionic5

Question

我正在尝试更改placeholder 的<ion-input> 的字体系列。
在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;
}

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

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

Answer 1

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

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