【网易云音乐首发】一站式字高修复解决方案正式揭秘

网易云音乐「Fin字高修复神器」正式开源上线 | 小而美的「插件」，彻底解决了困扰业界由于“字高因素“导致视觉还原不一致的问题

该工具帮助 UI 设计师与开发之间简化繁重的验收步骤，让双方合作变得更简单、高效和一致。

👇本文纯干货，约1900字

预计阅读时间：5分钟

 1. 我们如何与视觉还原度较劲？

1.1 行业痛点

• 设计👨🏻‍💻

• 开发👨🏻‍🔧

1.2 现状分析

「问题深挖：影响设计还原的关键因子是什么？🧐」

 2. 我们是如何解决的（设计+技术）

「我们的目标：最好是能做到字高像素级还原！🤞」

开发👨🏻‍🔧  号外号外！各端的解决方案现开源给到大家，别太感动了哈～

 3. 「Fin字高修复神器」设计使用指南  

「一款手残党也能快速领悟并上手的工具，不接受反驳哦😝」

3.1 插件安装与打开（Figma）

👀 当前可修复的字号仅限在8-75号之间，目前仅限苹方(PingFang SC), SF UI Display, Inter字体

进入「community/社区」→ 搜索 “字高修复神器” →「Plugins/插件」→「Install/安装」

3.2 插件功能介绍（Figma）

「字高修复神器涉及两个核心功能📐」

功能一：单行行高修复神器— 主要修复在设计稿中 Frame/画板内的所有单行行高问题。

功能二：多行行高计算器 — 快速解决在设计稿中想快捷设置多行行高的场景。

3.3 插件使用方式（Figma）

1. 设计师在交付给开发前，选择想要修复的 Frame 或 Text 后点击「Auto Fix/自动修复」，同时底部会出现 “Fix Success/修复成功” 的提示信息说明你选择对象中所有单行行高修复已完成。

3.4 插件安装与打开（Sketch）

「重要的事情说三遍!👏」 

 3.5 插件使用方式（Sketch）

#import <NEUIKit/UILabel+NEDolphinText.h>UILabel *label = [UILabel new];// 设置字号为12UIFont *font = [UIFont fontWithName:@"PingFangSC-Regular" size:12.f]// 设置字体、文字内容、视觉要求行高[label ne_dolphin_setTextWithFont:font text:@"测试文案" lineHeight:14];

方法1：文本包装span修改字体属性 - 建议android:includeFontPadding="false"单行标准行高 // 内容 + 字号 + 字号单位setText(warpStandardHeightSpan("ceshi", 12 , TypedValue.COMPLEX_UNIT_DIP))多行指定行高 // 内容 + 设计稿指定1.5倍行高setText(warpFixHeightSpan("ceshi" , 18))
方法2：自定义组件<com.netease.cloudmusic.core.dolphin.component.text.DolphinTextView    android:textSize="12dp"      // 设置字体大小    app:dolphinText="文本内容"   // 设置文本内容    app:dolphinLineHeight="18dp"   // 设置行高 （仅多行文本需要） />

{/*lineHeight即视觉稿行高 */}<Text style={{ fontSize: 12, lineHeight: 14 }}>       文本内容 </Text>

长按识别二维码关注 ｜ 网易云音乐MDC

原文始发于微信公众号（网易云音乐技术团队）：【网易云音乐首发】一站式字高修复解决方案正式揭秘