flutter 使用 iconfont，在ios移动设备上行高不正确

[gujintao1900]

补充说明

经过测试，多色的 iconfont 显示没有问题，对比发现多色的 iconfont 中 lineGap 是 0

问题描述

使用 阿里iconfont 生成字体在ios上显示有问题，但是我用 Material Design Icons 显示没问题

参考 React Native App 自定义字体在安卓系统中的行高问题解决 用 Font Tools for Xcode 调整字体

实际测试 lineGap 设置为 0 后整体不再明显偏移

通过 ftxdumperfuser -t hhea -A f hbb_icon_old.ttf 提取字体信息

<hheaTable
	versionMajor="1"
	versionMinor="0"
	ascender="896"
	descender="-128"
	lineGap="92"
	advanceWidthMax="1202"
	minLeftSideBearing="-16"
	minRightSideBearing="-16"
	xMaxExtent="1203"
	caretSlopeRise="1"
	caretSlopeRun="0"
	caretOffset="0"
	metricDataFormat="0"
	numberOfHMetrics="106"
	/>

通过 ftxdumperfuser -t hhea -A d hbb_icon_old.ttf 修改 lineGap="0" 写入字体文件

<hheaTable
	versionMajor="1"
	versionMinor="0"
	ascender="896"
	descender="-128"
	lineGap="0" 
	advanceWidthMax="1202"
	minLeftSideBearing="-16"
	minRightSideBearing="-16"
	xMaxExtent="1203"
	caretSlopeRise="1"
	caretSlopeRun="0"
	caretOffset="0"
	metricDataFormat="0"
	numberOfHMetrics="106"
	/>

iconfont字体基线问题

截图

重现步骤

新建flutter项目运行

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class TestEmptyPage extends StatelessWidget {
  const TestEmptyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const size = 100.0;
    const color = Colors.greenAccent;
    const oldIcon = Icon(
      IconData(0xe8c4, fontFamily: 'hbb-icon-old'),
      size: size,
    );
    const newIcon = Icon(
      IconData(0xe8c4, fontFamily: 'hbb-icon-new'),
      size: size,
    );
    final svgIcon = SvgPicture.string(
      '<svg t="1669106225604" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4306" width="200" height="200"><path d="M509.212444 113.948444a391.964444 391.964444 0 0 1 155.818667 31.203556 398.222222 398.222222 0 0 1 212.992 213.020444 391.992889 391.992889 0 0 1 31.203556 155.790223 391.964444 391.964444 0 0 1-31.203556 155.790222 398.222222 398.222222 0 0 1-212.992 212.992 391.992889 391.992889 0 0 1-155.818667 31.203555 391.964444 391.964444 0 0 1-155.790222-31.203555 398.222222 398.222222 0 0 1-212.992-212.992A391.992889 391.992889 0 0 1 109.226667 513.991111a391.964444 391.964444 0 0 1 31.203555-155.790222 398.222222 398.222222 0 0 1 212.992-213.020445 391.992889 391.992889 0 0 1 155.790222-31.203555z m-81.720888 252.928a46.193778 46.193778 0 0 0-65.336889 65.336889l81.720889 81.749334-81.720889 81.749333a46.193778 46.193778 0 1 0 65.336889 65.308444l81.720888-81.749333 81.749334 81.749333a46.193778 46.193778 0 0 0 65.336889-65.308444L574.577778 513.962667l81.749333-81.749334a46.193778 46.193778 0 0 0-65.336889-65.336889l-81.749333 81.749334z" p-id="4307"></path></svg>',
      height: size,
    );
    const divider = Divider(height: 12, thickness: 0);
    return Scaffold(
      appBar: AppBar(title: const Text('iconfont')),
      body: Column(children: [
        Row(children: const [
          ColoredBox(color: color, child: oldIcon),
          Text('原始字体'),
        ]),
        divider,
        Row(children: const [
          ColoredBox(color: color, child: newIcon),
          Text('行高修复'),
        ]),
        divider,
        Row(children: [
          ColoredBox(color: color, child: svgIcon),
          const Text('原始SVG图标'),
        ]),
        divider,
        Row(children: const [
          ColoredBox(
            color: color,
            child: Icon(Icons.circle_notifications, size: size),
          ),
          Text('官方Materialt图标'),
        ]),
      ]),
    );
  }
}

期望结果

行高正常

相关信息（重要）

• 发生问题的 URL：
• iconfont 的用户昵称：QingYang
• iconfont 项目 ID：2559039

相关文件（重要）

hbb_icon_new.ttf 行高修复 hbb_icon_old.ttf 原始文件
归档.zip

<svg t="1669106225604" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4306" width="200" height="200"><path d="M509.212444 113.948444a391.964444 391.964444 0 0 1 155.818667 31.203556 398.222222 398.222222 0 0 1 212.992 213.020444 391.992889 391.992889 0 0 1 31.203556 155.790223 391.964444 391.964444 0 0 1-31.203556 155.790222 398.222222 398.222222 0 0 1-212.992 212.992 391.992889 391.992889 0 0 1-155.818667 31.203555 391.964444 391.964444 0 0 1-155.790222-31.203555 398.222222 398.222222 0 0 1-212.992-212.992A391.992889 391.992889 0 0 1 109.226667 513.991111a391.964444 391.964444 0 0 1 31.203555-155.790222 398.222222 398.222222 0 0 1 212.992-213.020445 391.992889 391.992889 0 0 1 155.790222-31.203555z m-81.720888 252.928a46.193778 46.193778 0 0 0-65.336889 65.336889l81.720889 81.749334-81.720889 81.749333a46.193778 46.193778 0 1 0 65.336889 65.308444l81.720888-81.749333 81.749334 81.749333a46.193778 46.193778 0 0 0 65.336889-65.308444L574.577778 513.962667l81.749333-81.749334a46.193778 46.193778 0 0 0-65.336889-65.336889l-81.749333 81.749334z" p-id="4307"></path></svg>

平台/浏览器版本（重要）

• 操作系统及版本：

iOS 16.1

• 浏览器名称及版本：

[gujintao1900]

@yisibl

[yisibl]

行高一直是老大难的问题，我有一个PR 尝试解决这个问题：fontello/svg2ttf#119

你可以在本地把 font-carrier 中的 svg2ttf 修改成这个 PR 的样子试试。

[yisibl]

@gujintao1900 这个文章里的数值修改过于实验性了，有兴趣的话可以看看这个文章里的行高选择策略：https://glyphsapp.com/zh/learn/vertical-metrics

[gujintao1900]

@gujintao1900 这个文章里的数值修改过于实验性了，有兴趣的话可以看看这个文章里的行高选择策略：https://glyphsapp.com/zh/learn/vertical-metrics

这个明白，现在主要问题是单色和多色生成的时候 lineGap 数据不一致的问题。
使用相同的 icon，勾选彩色 后重新生成的字体中 lineGap 就是0

[yisibl]

彩色字体和普通字体两套机制生成的，字体里的表也不一样。你试试 svg2ttf 那个 PR 是不是可以解决？