pxcook中获取文字行高与段落间距需四步:一、右键文本图层→“查看样式”查line-height;二、开启测量模式悬停多行文本读取基线距;三、导出json标注数据解析textstyle中lineheight/paragraphspacing字段;四、启用开发者模式复制css验证line-height及margin/padding值。

如果您在使用PxCook进行设计稿标注时,需要准确获取文字的行间距(即行高)与段落间距值,但界面未直接显示该参数,则可能是由于文本样式未被完整解析或测量模式未启用文本属性读取。以下是获取文本行高和段落间距的具体操作步骤:
一、通过文本图层右键菜单读取行高
PxCook支持对选中文本图层右键调出属性面板,其中包含已解析的CSS文本属性,行高(line-height)会以像素值形式呈现。
1、在PxCook左侧图层列表中,单击选中目标文字图层(确保该图层为Sketch或Figma导出的原生文本图层,非图片或矢量轮廓)。
2、鼠标右键点击该图层,在弹出菜单中选择“查看样式”或“显示CSS属性”(具体名称依PxCook版本略有差异)。
3、在右侧弹出的样式面板中,向下滚动查找line-height字段,其数值即为当前文字的行高(单位:px)。
4、若未显示line-height,检查该文本是否应用了相对单位(如1.5、2em),此时PxCook可能仅显示原始值而非计算后像素值;可切换至“计算值”标签页查看。
二、使用测量工具悬停获取实时行距信息
当开启智能测量模式后,PxCook可在鼠标悬停于多行文本区域时,自动识别并高亮显示相邻两行基线之间的垂直距离,该距离即为实际渲染行高。
1、点击顶部工具栏中的“测量”按钮(标尺图标),确保测量模式处于激活状态。
2、将鼠标移至目标多行文本块内部,缓慢沿纵向移动,注意观察文本行间出现的蓝色虚线与数值标签。
3、当虚线连接上下两行文字基线时,悬浮标签中显示的数值即为该文本块的实际行高(px)。
4、若需获取段落间距(paragraph spacing),将鼠标移至段落末尾换行符后空白处,观察是否出现另一组垂直间距标签——该值通常对应CSS中的margin-bottom或padding-bottom。
三、导出JSON标注数据后解析行高字段
对于需批量提取行高与段落间距的场景,可通过导出结构化标注数据,在JSON中定位textStyle相关节点,直接读取原始定义值。
1、点击右上角“导出” → “导出标注数据(JSON)”,保存文件至本地。
2、用文本编辑器打开该JSON文件,搜索目标图层name或id,定位到其textStyle对象。
3、在textStyle内查找字段:"lineHeight"(行高)、"paragraphSpacing"(段落间距)、"lineGap"(行间空隙),其数值均为数字类型,单位默认为px。
4、若字段值为null或缺失,说明源设计文件未显式设置该属性,此时应以字体大小×默认倍率(如iOS为1.2,Android为1.4)估算基础行高。
四、切换至开发者模式查看完整CSS输出
PxCook的开发者模式可生成接近真实浏览器渲染的CSS代码,其中包含经转换后的line-height与段落边距声明,适用于验证最终落地效果。
1、进入PxCook设置面板,勾选“启用开发者模式”并重启软件。
2、重新打开设计稿,右键文本图层,选择“复制CSS”或“查看开发者样式”。
3、在弹出窗口中查找CSS规则块,确认是否存在line-height、margin-top/margin-bottom、padding-top/padding-bottom等影响垂直间距的声明。
4、特别注意font-size与line-height的组合关系:例如font-size: 14px; line-height: 20px; 表示行高为20px,行间距=20−14=6px。











