在PxCook中需切换至开发模式、选中真实文本图层(缩略图显示“T”图标),右侧面板即可显示字号、行高、字重等完整字体参数;还可通过智能标注可视化查看,或一键导出标准CSS代码。

如果您在PxCook中打开设计稿后无法快速获知图层中文本的字号、行高、字重等字体参数,则可能是由于未进入开发模式或未正确选中文本元素。以下是获取文字字号、行高、字重等字体参数的具体操作步骤:
一、切换至开发模式并选中文本图层
开发模式下,PxCook右侧面板会完整显示所选文本元素的全部样式属性,包括字体家族、字号、行高、字重、颜色及是否倾斜等。只有在该模式下选中真实文本图层(非栅格化图片或形状),参数才能被准确识别。
1、启动PxCook软件,拖入PSD或Sketch画板文件;
2、点击顶部导航栏中的“开发”模式标签,切换至开发者视角;
3、在画布中单击选中目标文字图层(确保图层缩略图显示为“T”图标,而非方块或预览图);
二、查看右侧面板中的字体参数
当文本图层被成功激活后,右侧属性面板将自动展开“文本”或“字体”分组,所有可解析的CSS级字体信息将以结构化方式呈现,无需手动计算或猜测。
1、在右侧面板中定位到“字体”或“文本样式”区域;
2、确认以下关键参数已明确列出:font-size(字号)、line-height(行高)、font-weight(字重)、font-family(字体族)、font-style(是否斜体);
3、若存在颜色叠加或图层混合效果,面板中还会同步显示文字实际渲染色值(RGB/HEX),而非图层原始填充色。
三、使用智能标注一键提取字体信息
PxCook的智能标注功能可在不切换模式的前提下,直接在画布上可视化呈现文字样式,适用于快速比对与口头交接,其标注内容基于真实图层数据生成,具备工程可用性。
1、确保图层处于可编辑状态(即未合并、未栅格化);
2、点击顶部工具栏中灯泡形状的“智能标注”按钮;
3、在画布中单击目标文字区域,左侧将动态激活“字体标注”子工具;
4、点击该子工具,画布上立即生成含字号、字重、字体名称的浮动标注框,支持拖拽调整位置。
四、导出字体参数为前端代码片段
对于需交付给开发人员的场景,PxCook支持将当前选中文本的完整字体声明一键生成标准CSS代码,避免人工转录误差,且适配多端单位换算逻辑。
1、保持文本图层处于选中状态;
2、在右侧面板底部查找“复制CSS”或“生成代码”按钮;
3、点击后弹出代码预览框,其中font属性行已包含font-size、line-height、font-weight、font-family的完整声明;
4、支持选择输出单位(px/dp/rem),并自动处理iOS/Android/Web平台差异。

















