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好?