解决el-input输入框(text)与文本域(textarea)字体不一样问题

最新推荐文章于 2025-04-29 09:15:19 发布

cc980302

最新推荐文章于 2025-04-29 09:15:19 发布

阅读量2.6k

点赞数 2

分类专栏： elementUi 文章标签：前端 elementui

本文链接：https://blog.youkuaiyun.com/weixin_56818823/article/details/130500279

版权

elementUi 专栏收录该内容

17 篇文章

订阅专栏

文章主要讨论了在一些旧的Win7系统中，组件库默认textarea字体可能出现的显示问题，可能是由于分辨率低或字体适配问题导致。为解决这个问题，建议在全局样式(app.vue)中统一修改字体样式，确保与输入框字体一致。文中提供了相应的Less代码片段来修复textarea、表格和对话框等元素的样式问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：组件库默认的textarea字体类型在一些比较旧的win7系统容易出现不适配的问题，如下图

很明显字体显示出现了问题

出现原因：可能是分辨率太低，也可能是该电脑对该字体适配有问题

解决办法：与上面的输入库字体保持一致

一般情况，我们一个网站的textarea字体都是一样的，所以可以在app.vue中直接修改字体样式，以下代码是我对全局样式的一些统一

<style lang="less">
@import "assets/less/index.less";
@import "assets/less/reset";
//解决输入框(text)与文本域(textarea)字体不一致问题
.el-textarea__inner {
  font-family: Arial, Helvetica, sans-serif !important;
}
/* 解决el-table 表线不齐 */
.el-table th.gutter {
  display: table-cell !important;
}
/* 解决el-table切换固定列底部出现线条*/
.tableClass {
  .el-table__fixed,
  .el-table__fixed-right {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
}
// .filter-item {
// 		display: inline-block;
// 		vertical-align: middle;
// 		margin: 0 3px 10px 0;
// 		input {
// 			height: 30.5px;
// 			line-height: 30.5px;
// 		}
// 	}
.el-table th.table-header-bg {
  background: #f8f8f9 !important;
}
.el-dialog__header {
  background-color: #169fe6 !important;
}
.el-dialog__title {
  color: #f8f8f9 !important;
}
.el-icon-close {
  color: #f8f8f9 !important;
}
.el-button--primary {
  background-color: #169fe6 !important;
  border-color: #169fe6 !important;
}
</style>