android中文字体向上偏移的解决方法在开发webapp的时候，发现android端的中文会莫名其妙的向上偏移。为了解决这个问题，尝试了很多方法，最后使用了下面的解决方案。1、bug出现。我目前正在开发一个网络应用程序。调试的时候发现项目中的中文有点上移。具体表现为：使用开发者工具查看元素，元素的真实高度和位置与文字不一致。例如，span的font-size和line-height都设置为16px。调试的时候，元素的高度确实是16px。但是中文的高度好像没有超过16px，显示的位置明显超过了元素的大小。范围，向上偏移。一开始以为是样式的问题，于是尝试了各种修改css，但是完全没有用。后来在网上看到用“定位”或者“上边距”来强制文字的位置，但是觉得这个方法太麻烦，最后放弃了这个方案。后来想到是我用的是ubuntu，怀疑可能是系统默认的字体导致了这个问题。于是下载了一个字体文件（用的是“思源黑体”）。然后配置全局字体，发现可以解决这个问题。2.出现第二个问题。虽然使用自定义字体解决了中文偏移问题，但由于字体文件太大，性能并不理想。将字体文件放在服务器上或使用cdn都不理想。终于找到了fontmin插件。本插件的原理是过滤字体文件中的字符集，生成的新字体文件只包含要使用的文字字符集。3、最终解决方案fontmin虽然可以过滤字符集，但是项目中需要哪些汉字是不确定的。不过没关系，经过实验，使用只有0字符集的字体文件也可以解决我们最初的问题。让我们看看实现步骤。3.1字体下载从网上下载一个中文字体，这里我使用的是googlefonts。先测试直接引用这个字体后是否可以解决字体偏移。如果可能，继续下一步。3.2安装这里不推荐全局安装fontmin，可以在项目中安装。npminstallfontmin-D然后写入配置文件。这里我写在项目根目录下。//fontmin-config.jsvarFontmin=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-dirnode./fontmin-config.js3.3配置css//global.css@font-face{font-family:"my-font";src:url("../fonts/my-font.ttf");}html,body{font-family:"my-font",sans-serif;}
