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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Android UI设计系列之HTML标签实现TextView设置中文字体加粗效果（6）

    Android UI设计系列之HTML标签实现TextView设置中文字体加粗效果（6）

    搞软件开发的都知道项目中各种需求都有,而有时候各种奇葩的需求真是让人大跌眼镜,为了实现这些奇葩的需求我们往往苦逼的废寝忘食,我现在的项目中就有一个应该算得上奇葩的需求吧,需求是这样的:在一段文字中实现对部分文字加粗 这个看上去也不难并且有点小儿科,因为TextView中有个属性是Android:textStyle,它其中一个值是bold,也就是说是对将要显示的文字进行加粗,于是我就在TextView控件中添加了此属性,代码如下: <TextView android:layout_width=&quo

  • android TextView设置中文字体加粗实现方法

    英文设置加粗可以在xml里面设置: 复制代码 代码如下: <SPAN style="FONT-SIZE: 18px">android:textStyle="bold"</SPAN> 英文还可以直接在String文件里面直接这样填写: 复制代码 代码如下: <string name="styled_text">Plain, <b>bold</b>, <i>italic</

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

    在开发 webapp 时,发现在 android 端的中文会莫名其妙的向上偏移.为了解决这个问题,尝试了很多方法,最后使用以下解决方案. 1.bug 出现 目前在开发 webapp,在调试的时候,发现项目里面的中文有一点向上偏移.具体表现为:使用开发者工具去查看元素,元素的真实高度和位置与文字不同.列如,一个span的font-size和line-height都设置为16px,在调试时,元素的高度确实是16px,但是,中文的高度看起来并不止16px,而且显示的位置明显超出了元素的尺寸范围,向上偏

  • 详解Android登陆界面用户协议解决方案

    先上一张图来看要实现的东西 用户协议.png 一般来说每个app都有这个用户协议阅读相关的功能,之前做的都是一个协议,也都是单行的,完全没有复杂度,可以一个checkbox加上一个textview来搞定,那么像图上这种复杂的该怎们实现呢. 来看他有神们不同,有那些难点 1,选中框被文字包裹,单纯的checkbox和textview无法实现,因为选中框会在文字左方 2,协议文件有很多,不定项,文件是服务器返回的,而且每个文件中间都会有一个颜色不一样的点隔开 3,为每个文件都有点击事件,点击文件会产

  • 详解Android更改APP语言模式的实现过程

    详解Android更改APP语言模式的实现过程

    一.效果图 二.描述 更改Android项目中的语言,这个作用于只用于此APP,不会作用于整个系统 三.解决方案 (一)布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" a

  • 详解Android studio如何导入jar包方法

    详解Android studio如何导入jar包方法

    下面我就总结一下Android studio大家在导入jar包时遇到的一些问题和解决方法: 1,首先先说一下怎么在AS 中找到sdk,jdk,ndk的安装路径,可能一部分人一开始找不到,下面贴出方法: Android studio 中更改sdk的路径,如下图,在右边红色方框中更改sdk的路径 还有一种更好的方式可以把sdk,jdk,ndk的路径全部找到,首先File---Other Settings---Default Project Structure...,打开如下图界面,从红方框处即可直接

  • 详解Flutter混排瀑布流解决方案

    详解Flutter混排瀑布流解决方案

    背景 流式布局,这是一种当前无论是前端,还是Native都比较流行的一种页面布局.特别是对于商品这样的Feeds流,无论是淘宝,京东,美团,还是闲鱼.都基本上以多列瀑布流进行呈现,容器列数固定,然后每个卡片高度不一,形成参差不齐的多栏布局. 对于Native来说,无论是iOS还是Android,CollectionView和RecyclerView都能满足我们的绝大部分场景了.不过目前闲鱼很多业务场景都是在Flutter上进行实现的,当时Flutter官方只提供了ListView和GridVie

  • 详解Android Studio中Git的配置及协同开发

    一. Android Stutio配置git setting–>Version Control–>Git–>Path to Git executable中选择git.exe的位置,这个Stutio一般会默认配置好: 配置完路径后点击后面的Test按钮,出现下面提示框则表示配置成功: 二. 将项目分享到github 1. 设置github账号密码 打开Setting–>Version Control–>GitHub,填写完账号密码后,点击Test测试,如果连接成功会弹出如下提示

  • 详解Android 基于TCP和UDP协议的Socket通信

    详解Android 基于TCP和UDP协议的Socket通信

    本来想讲一下基础的网络通信方面的知识点,发现太枯燥乏味了,不过笔试中也经常会问到这方面的问题,所以关于通信方面的知识点,小编会放到面试中去,因为实战中也就面试会用到这方面知识点 Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是"请求-响应方式",即在请求时建立连接通道,当客户端向服务器发送请求后,服务器端才能向客户端返回数据. 而Socket通信中基于TCP/IP协议的通信则是在双方建立起连接后就可以直接进行数

  • 详解Android中PopupWindow在7.0后适配的解决

    详解Android中PopupWindow在7.0后适配的解决

    本文介绍了详解Android中PopupWindow在7.0后适配的解决,分享给大家,具体如下: 这里主要记录一次踩坑的经历. 需求:如上图左侧效果,想在按钮的下方弹一个PopupWindow.嗯,很简单一个效果,然当适配7.0后发现这个PopupWindow显示异常,然后网上找到了下面这种方案. 7.0适配方案(但7.1又复现了) // 将popupWindow显示在anchor下方 public void showAsDropDown(PopupWindow popupWindow, Vie

  • 详解Android安全防护之加密算法

    摘要 也许有些开发者或者企业觉得.我们公司的app,数据量这些少,会有那个黑客吃饱了没事做来破解啊.又不是支付宝,或者其他那些用户量很多的应用.如果是这样想的话,那只能说目光短浅了. Android应用常用的加密算法 如果说按加密的内容是否可以还原,可以分为可逆加密和非可逆加密. 非可逆加密:也就是说加密后的数据是不能还原成原来的数据.比如MD5加密 加密一个密码:123456 加密后成: afabsbfbabf437hfbbff73(结果并不一定是这个,只是举例).也就是说加密后的结果afab

  • 详解Android 裸眼3D效果View控件

    详解Android 裸眼3D效果View控件

    描述:这是一个裸眼3D效果的控件View. Tips:本项目代码部分逻辑参考于其他文章(自如的3D裸眼实现),众人拾柴火焰高,希望大家能多多补充. 项目代码:https://gitee.com/jiugeishere/uidesign 控件效果如下: 实现功能: 实现三层图片叠加效果(裸眼3D效果) 可设置每层图片移动速率 可设置每层图片移动的限制度数 可直接设置图片或引入图片 设计核心: 主要的设计核心是依赖于传感器对手机晃动的监听(重力感应监听器),对每层图片进行不同的移动,实现仿3D效果.

随机推荐