android中怎么解决中文字体向上偏移

这篇文章给大家介绍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

这里不推荐全局安装，在项目里面安装即可。

npminstallfontmin-D

然后编写配置文件。这里我是写在项目根目录的。

//fontmin-config.js

varFontmin=require("fontmin")
varsrcPath="./src/assets/fonts/my-font.ttf"//字体源文件
vardestPath="./src/assets/font-output/"//输出路径
vartext="0"//筛选的字符集

varfontmin=newFontmin()
.src(srcPath)//输入配置
.use(
Fontmin.glyph({
text:text
})
)
.dest(destPath)//输出配置

fontmin.run(function(err,files,stream){
if(err){
console.error(err)
}
console.log("done")
})

然后执行

cdyour-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中怎么解决中文字体向上偏移就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。