时间:2021-05-19
在开发 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.jsvar 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-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;}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
excel导出在docker环境中总是失败,最直接的原因还是因为没有安装中文字体,解决方法如下:DOCKER环境中没有安装中文字体,需要安装java.lang.
Win7下Eclipse中文字体太小解决最近新装了Win7,打开eclipse3.7中文字体很小,简直难以辨认。在网上搜索发现这是由于Eclipse3.7用的字
1、将中文字体名换成英文名:Windows系统常见中文字体英文名称:========================黑体:SimHei宋体:SimSun新宋体:
1.准备中文字体Windows有不错的中文字体sim*.ttc2.创建目录/usr/X11R/lib/X11/fonts/TrueType,将sim*.ttc拷
Word2016文档中,通过启用“中文字体也应用于西文”功能,可以在所将选文字应用中文字体的同时,将同时选中的西文字符同样设置为相同的中