android 中文字体向上偏移解决方案

susheng 发布于2019-06-25 12:34 / 2224人阅读

摘要：中文字体向上偏移解决方案在开发时，发现在端的中文会莫名其妙的向上偏移。出现目前在开发，在调试的时候，发现项目里面的中文有一点向上偏移。

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;
}

idc机房托管私有云 android中文 android开发中文 android中文开发 android 中文语音识别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/14676.html

android 中文字体向上偏移解决方案

摘要：中文字体向上偏移解决方案在开发时，发现在端的中文会莫名其妙的向上偏移。出现目前在开发，在调试的时候，发现项目里面的中文有一点向上偏移。 android 中文字体向上偏移解决方案在开发 webapp 时，发现在 android 端的中文会莫名其妙的向上偏移。为了解决这个问题，尝试了很多方法，最后使用以下解决方案。 1.bug 出现目前在开发 webapp，在调试的时候，发现项目里面的...

acrazing 2019-08-05 15:57 评论0 收藏0
解决安卓字体偏移：页面整体缩放

摘要：在中实现一些小标签按钮的时候，很容易发现部分安卓机型上的字体显示有问题，总会向上偏移左右。在页面头部通常都会写上标签，我们可以将的设为来达到页面整体缩放的效果，也可以修正字体偏移。　　在h5中实现一些小标签、按钮的时候，很容易发现部分安卓机型上的字体显示有问题，总会向上偏移2px左右。这是设置padding或line-height无法修复的，与rem也无关，即使在字体大于12px时依然存在。...

Aomine 2019-04-23 13:19 评论0 收藏0
前端入门4-CSS属性样式表

摘要：正文属性样式表正文属性样式表了解了具体的各种工作原理使用方式选择器规则层叠算法等之后，那么该来学习的也就是都支持哪些属性样式表了。本篇文章已授权微信公众号 dasu_Android（大苏）独家发布声明本系列文章内容全部梳理自以下四个来源：《HTML5权威指南》《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白，入...

hss01248 2019-04-23 13:14 评论0 收藏0
前端知识点总结——CSS

摘要：父元素没有上边框为子元素设置上外边距时在中嵌套一个子元素设置其尺寸为，并设置其背景颜色设置的上外边距为观察其结果。前端知识点总结——CSS 1.CSS的概述 1.什么是CSS? CSS：Cascading Style Sheets层叠样式表，级联样式表（简称：样式表） 2.作用设置HTML网页元素的样式 3.HTML与CSS的关系 HTML：负责内容的展示 CSS：负责内容（元素）...

nicercode 2019-08-30 14:01 评论0 收藏0
HTML与CSS中的文本个人分享

摘要：文本标题元素注意在一个页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码标题元素元素默认效果是显示最大显示最小默认效果是由浏览器自带样式提供可以通过进行修改每个标题元素是独占一行并且是垂直排列在实际开发中常用的标题元素最文本标题元素注意: 在一个HTML页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码: 一花一世界一叶一孤城娃哈哈爽歪歪...

MartinHan 2019-08-29 16:32 评论0 收藏0