uni-app android 中英文分别用不同的字体库时 input type='password' placeholder 英文下字体和其他input 字体不一样

在 uni-app 中，如果你希望在不同的语言环境下使用不同的字体库，并且发现 input 的 type="password" 的 placeholder 字体与其他 input 的字体不一致，可能是因为 type="password" 的 placeholder 默认使用了系统默认的字体，而不是你指定的字体。

要解决这个问题，你可以通过以下步骤来确保 input 的 placeholder 字体与其他 input 的字体一致：

1. 使用 :lang 选择器

你可以使用 :lang 选择器来为不同的语言环境设置不同的字体。例如：

/* 默认字体 */
input {
  font-family: 'DefaultFont', sans-serif;
}

/* 英文环境下的字体 */
:lang(en) input {
  font-family: 'EnglishFont', sans-serif;
}

/* 中文环境下的字体 */
:lang(zh) input {
  font-family: 'ChineseFont', sans-serif;
}

/* 针对 password 类型的 input 的 placeholder */
input[type="password"]::placeholder {
  font-family: inherit; /* 继承父元素的字体 */
}

2. 动态设置字体

你也可以通过 JavaScript 动态设置字体。例如，在 onLoad 或 onShow 生命周期中根据当前语言环境设置字体：

export default {
  onShow() {
    const lang = uni.getLocale();
    if (lang === 'en') {
      document.documentElement.style.setProperty('--input-font-family', 'EnglishFont, sans-serif');
    } else if (lang === 'zh') {
      document.documentElement.style.setProperty('--input-font-family', 'ChineseFont, sans-serif');
    }
  }
}

然后在 CSS 中使用这个变量：

input {
  font-family: var(--input-font-family, 'DefaultFont', sans-serif);
}

input[type="password"]::placeholder {
  font-family: var(--input-font-family, 'DefaultFont', sans-serif);
}

3. 使用 scoped 样式

如果你在 uni-app 中使用了 scoped 样式，确保样式能够正确应用到 input 元素上。你可以使用 >>> 或 /deep/ 来穿透作用域：

<style scoped>
/* 默认字体 */
input {
  font-family: 'DefaultFont', sans-serif;
}

/* 英文环境下的字体 */
:lang(en) >>> input {
  font-family: 'EnglishFont', sans-serif;
}

/* 中文环境下的字体 */
:lang(zh) >>> input {
  font-family: 'ChineseFont', sans-serif;
}

/* 针对 password 类型的 input 的 placeholder */
input[type="password"]::placeholder {
  font-family: inherit; /* 继承父元素的字体 */
}
</style>

4. 检查字体加载

确保你的字体文件已经正确加载，并且字体名称在 CSS 中正确引用。

5. 使用 !important（不推荐）

如果上述方法仍然无法解决问题，你可以尝试使用 !important 来强制应用字体样式，但这通常不推荐，因为它可能会导致样式难以维护。

input[type="password"]::placeholder {
  font-family: 'YourFont', sans-serif !important;
}