详解android 中文字体向上偏移解决方案
在开发 webapp 时,发现在 android 端的中文会莫名其妙的向上偏移。为了解决这个问题,尝试了很多方法,最后使用以下解决方案。
1.bug 出现
目前在开发 webapp,在调试的时候,发现项目里面的中文有一点向上偏移。具体表现为:使用开发者工具去查看元素,元素的真实高度和位置与文字不同。列如,一个span
的font-size
和line-height
都设置为16px
,在调试时,元素的高度确实是16px
,但是,中文的高度看起来并不止16px
,而且显示的位置明显超出了元素的尺寸范围,向上偏移。
开始的时候还以为是样式导致的,于是尝试各种修改 css,但是完全没有用。后来在网上看到用“定位”或者“上边距”来强制文字的位置,但是发现这个方法太麻烦了,最终放弃这个方案。
后来想到使用的是ubuntu
,怀疑可能是系统默认字体的原因导致了这个问题。于是下载了一个字体文件(用的是“思源黑体”)。然后配置全局字体,发现可以解决这个问题。
2.第二个问题出现
虽然使用自定义字体解决了中文文字偏移的问题,但是由于字体文件太大导致性能很不理想。无论是将字体文件放到服务器还是使用 cdn 都不理想。最终找到了fontmin这个插件。这个插件的原理是将字体文件中的字符集
进行筛选,生成的新的字体文件中,只包含要使用到的文字字符集。
3.最终的方案
虽然fontmin
可以进行字符集筛选,但是项目中到底需要哪些中文文字是不确定的。但没有关系,经过实验,使用一个只有0
这个字符集的字体文件同样可以解决我们最初的问题。下面来看实现步骤。
3.1 字体下载
到网上下载一个中文字体,这里我使用的是google fonts。先测试一下,直接引用这个字体后,是否可以解决字体偏移。可以的话,进行下一步。
3.2 安装 fontmin
这里不推荐全局安装,在项目里面安装即可。
npm install fontmin -D
然后编写配置文件。这里我是写在项目根目录的。
// fontmin-config.js
var Fontmin = require("fontmin")
var srcPath = "./src/assets/fonts/my-font.ttf" // 字体源文件
var destPath = "./src/assets/font-output/" // 输出路径
var text = "0" // 筛选的字符集
var fontmin = new Fontmin()
.src(srcPath) // 输入配置
.use(
Fontmin.glyph({
text: text
})
)
.dest(destPath) // 输出配置
fontmin.run(function(err, files, stream) {
if (err) {
console.error(err)
}
console.log("done")
})
然后执行
cd your-project-dir
node ./fontmin-config.js
3.3 配置 css
// global.css
@font-face {
font-family: "my-font";
src: url("../fonts/my-font.ttf");
}
html,body{
font-family: "my-font", sans-serif;
}
以上就是本文的全部内容,希望对大家的学习有所帮助。
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- HTML+PHP实现多文件上传
- 一个让我欲罢不能的 GitHub 开源项目!
- vue 随记(5):性能的飞跃
- Keras2NCNN?Yes
- 【翻译】从头实现Rust异步执行器
- 说一下你常用的加密算法
- 深入研究 Node.js 的回调队列
- 【kalman filter】卡尔曼滤波器与python实现
- 一文带你响应式网页设计入门
- 图像增强 | CLAHE 限制对比度自适应直方图均衡化
- 一分钟速学 | NMS, IOU 与 SoftMax
- [译] 使用 TypeScript 开发 React Hooks
- 磁盘空间分析神器 - ncdu
- Kafka笔记—可靠性、幂等性和事务
- 工程能力UP!| LightGBM的调参与并行