uni-app中的input输入框如何设置自定义字体

发布于 1周前 作者 songsunli 来自 uni-app

uni-app中的input输入框如何设置自定义字体

uni-app中的input输入框设置字体无效

uni-app中的input输入框设置字体无效；尝试过以下方法：

  1. 通过css设置font-family无效；
  2. 字体文件通过base64方式和本地加载、远程https加载字体无效；
  3. 通过api动态加载uni.loadFontFace方法无效。

说明： 在uni-app中的app端（安卓和ios）都无效；html5端正常显示。

由于客户规定使用特殊字体；该功能一直未实现；不知道是因为原生组件无法设置字体（微信小程序端说明：原生组件无法设置字体）；希望大神能提供一些解决方法；小弟不胜感激！


Harmonyos Next教程
10 回复

在App.vue页面

<style lang="scss"> .uni-input-input{ font-size: 35rpx; } </style>

亲测可以


同问啊，无法自定义字体

同问

请问解决了吗？我本地调试是好好的，但是发布以后怎么都不行。

我在app.vue设置input字体大小可以使用

我测试安卓input不显示，text中能显示，iOS都能显示，附件是代码

我也没办法设置font-family，结果用textarea解决的

24年了。这个问题依然存在，input无法设置自定义字体，不管是真机还是开发者工具，都无法设置 textarea可以。

同问楼主解决了吗

在uni-app中，你可以通过自定义样式来设置input输入框的字体。具体来说，可以通过CSS样式来定义字体，并将其应用到input元素上。以下是一个示例代码，展示了如何在uni-app中实现这一功能。

首先，你需要确保你有一个自定义字体文件（比如myFont.ttf），并将其放置在项目的static目录下（或其他你指定的目录）。

1. 引入自定义字体

在App.vue或页面的style标签中，通过@font-face规则引入自定义字体：

<style>
@font-face {
  font-family: 'MyCustomFont';
  src: url('@/static/myFont.ttf') format('truetype');
}
</style>

2. 应用自定义字体到input

接下来，在你的页面或组件中，为input元素应用这个自定义字体。假设你有一个页面index.vue：

<template>
  <view class="container">
    <input type="text" class="custom-input" placeholder="输入内容"/>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.custom-input {
  font-family: 'MyCustomFont', sans-serif; /* 使用自定义字体，并指定后备字体 */
  font-size: 18px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
</style>

3. 确保路径正确

注意，url('@/static/myFont.ttf')中的路径应该根据你的项目结构进行调整。@符号通常代表src目录，所以@/static/myFont.ttf表示src/static/myFont.ttf。如果你的字体文件放在其他位置，请相应地调整路径。

4. 运行项目

保存所有更改后，运行你的uni-app项目。现在，你应该能够在输入框中看到自定义字体了。

注意事项

  • 确保字体文件格式兼容你的目标平台（如iOS、Android、Web等）。
  • 字体文件的大小可能会影响应用的加载性能，因此尽量选择优化后的字体文件。
  • 在一些平台上，可能需要额外的配置来支持自定义字体，特别是在Web端和小程序端。

通过上述步骤，你可以在uni-app中轻松地为input输入框设置自定义字体。

回到顶部