详解android 中文字体向上偏移解决方案
在开发 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.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中验证码倒计时简单实现的相关资料，需要的朋友可以参考借鉴。2017-06-06
Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例
这篇文章主要介绍了Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例,这两个子控件一般被用作添加标题,在实际效果上并不是那么好控制,使用的时候需要谨慎,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了Android编程获取通知栏高度的方法,涉及Android针对通知栏属性相关操作技巧,需要的朋友可以参考下2016-01-01
这篇文章给大家主要介绍了利用Android如何实现果冻效果滑动效果的控件，实现的效果类似于iOS有阻尼效果的滑动控件，一般我们比较亲切地称之为果冻控件，常见的如微信里[我]的那个面板模块，即使没有再多的选项，也不会很生硬的不允许用户滑动。下面来一起看看吧。2016-11-11
Android Service中使用Toast无法正常显示问题的解决方法
这篇文章主要介绍了Android Service中使用Toast无法正常显示问题的解决方法,分析了Service中Toast无法正常显示的原因与相关的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下2016-10-10
Android涨姿势知识点之你没用过的BadgeDrawable
现在Android中有许多的应用仿苹果的在应用图标上显示小红点,下面这篇文章主要给大家介绍了关于Android涨姿势知识点之你没用过的BadgeDrawable的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
在Visual Studio上构建C++的GUI框架wxWidgets的开发环境
这篇文章主要介绍了Visual Studio上构件C++的GUI框架wxWidgets开发环境的方法,wxWidgets是一个跨多个系统平台的图形化界面开发框架,并且可用语言不限于C++,需要的朋友可以参考下2016-04-04
登陆界面创建一个复选按钮，通过按钮选取来进行事件处理。若按钮选中记住账号和密码的信息，本文教大家如何使用Android实现记住用户名和密码功能，感兴趣的小伙伴们可以参考一下2016-05-05
Android 中 TabHost与ViewPager结合实现首页导航效果
这篇文章主要介绍了Android 中 TabHost与ViewPager结合实现首页导航效果,代码简单易懂，感兴趣的朋友参考下吧2016-09-09
这篇文章主要介绍了Android动态表格的实现代码(内容、样式可扩缩),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-09-09
最新评论