详解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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Android Studio进行APP图标更改的两种方式总结
这篇文章主要介绍了Android Studio进行APP图标更改的两种方式总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
Android应用中使用ContentProvider扫描本地图片并显示
这篇文章主要介绍了Android应用中使用ContentProvider扫描本地图片并显示的方法,比调用本地图库的方法更加灵活和可定制,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了Flutter如何实现图片滤镜效果，帮助大家更好的理解和学习使用Flutter，感兴趣的朋友可以了解下2021-04-04
Android手机上，我们经常用imageview显示图片，通过本文学习获取网络图片并显示在imageview中，对android读取网络图片相关知识感兴趣的朋友一起学习吧2016-02-02
本篇文章主要介绍了Android中Handler实现倒计时的两种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
在Android应用开发中,性能优化是一个至关重要的方面,为了更好地监测布局渲染的耗时,我们需要一种可靠的实现方案,本文将介绍三种针对Android布局耗时监测的实现方案,帮助开发者及时发现并解决布局性能问题,需要的朋友可以参考下2024-03-03
Android启动内置APK和动态发送接收自定义广播实例详解
这篇文章主要介绍了Android启动内置APK和动态发送接收自定义广播实例详解的相关资料,需要的朋友可以参考下2017-06-06
本篇文章主要介绍了android开发修改状态栏背景色和图标颜色的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
本篇文章主要介绍了详解Android获取设备唯一ID的几种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
Android双向选择控件DoubleSeekBar使用详解
这篇文章主要为大家详细介绍了Android双向选择控件DoubleSeekBar的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论