详解android 中文字体向上偏移解决方案

发布时间:2019-08-08 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了详解android 中文字体向上偏移解决方案脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

在开发 webapp 时,发现在 android 端的中文会莫名其妙的向上偏移。为了解决这个问题,尝试了很多方法,最后使用以下解决方案

1.bug 出现

目前在开发 webapp,在调试的时候,发现项目里面的中文有一点向上偏移。具体表现为:使用开发者工具去查看元素,元素的真实高度和位置与文字不同。列如,一个spanfont-sizeline-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教程
脚本网站
android studio

脚本宝典总结

以上是脚本宝典为你收集整理的详解android 中文字体向上偏移解决方案全部内容,希望文章能够帮你解决详解android 中文字体向上偏移解决方案所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。