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中怎么解决中文字体向上偏移就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
推荐阅读
-
我的世界windows版怎么下载手机版
-
android(如何快速开发框架 小米note开发版MIUI,安卓6.0,怎么安装Xposed框架)
稳定版,你必须先根除。你上网搜索安卓可以叫别人s框架,对方可以把框架做成jar包,把这个jar包加载到项目目录的libs文件中使...
-
android(studio 虚拟机启动不了 android studio可以当模拟器用吗)
androidstudio可以当模拟器用吗?AmdCUP引导模拟器有点复杂。雷电模拟器上的抖音怎么登录不上?不是,闪电模拟调用...
-
从实践中学习手机抓包与数据分析(android 手机抓包app)
android手机抓包app?netcapture抓包精灵app(手机抓包工具)又名sslcapture,是什么专业的安卓手机抓...
-
android(studio全局搜索 android studio怎么看app界面)
androidstudio怎么看app界面?在设备桌面点击运用直接进入到App界面,就也可以参与其他你的操作了。android-...
-
怎么把android框架源代码拉到本地(android studio如何运行别人的源代码)
androidstudio如何运行别人的源代码?androidstudio点击刚建在列表中你选择导入module,导入即可在用...
-
android(studio2022年使用教程 怎么安装Android studio详细教程)
怎么安装Androidstudio详细教程?androidstudio中haxm直接安装的方法追加:1、简单的方法打开Andr...
-
怎么使用Android基准配置文件Baseline Profile方案提升启动速度
怎么使用Android基准配置文件Baseline Profile方案提升启动速度...
-
HTML5如何实现禁止android视频另存为
HTML5如何实现禁止android视频另存为今天小编给大家分享一...
-
学java好还是学php好?
