网页代码生成方法、装置、电子设备及存储介质制造方法及图纸

本发明专利技术提供了一种网页代码生成方法、装置、电子设备及存储介质，涉及网页技术领域。所述方法包括：获取网页设计稿的字号，其中，字号对应的行高是根据字号以及字号行高对照表确定的，字号行高对照表用于确定任意一个指定字号针对多个平台的适配行高；根据字号和字号行高对照表确定网页设计稿中字号对应的目标行高；根据目标行高以及网页设计稿获得网页设计稿对应的网页代码。因此，不仅能够实现网页设计稿与网页设计稿对应网页代码中字号行高布局的标准化与统一化，且能够解决相关技术中相同的字号在不同浏览器中行高标准不统一，而导致文本布局显示存在差异的问题。致文本布局显示存在差异的问题。致文本布局显示存在差异的问题。

【技术实现步骤摘要】
网页代码生成方法、装置、电子设备及存储介质


[0001]本专利技术涉及网页设计
，尤其涉及一种网页代码生成方法、装置、电子设备及存储介质。

技术介绍

[0002]在网页设计稿开发场景中，网页设计人员在设计网页文本布局时，有行高布局和字号布局两种布局方式。如图1所示，两者的区别在于标注字体与其他元素距离时，字号布局以使用到的文字底部为起点，行高布局以约定俗成的行高底部为起点。
[0003]而在网页代码开发场景中，前端开发人员使用margin属性(CSS语法)来设置文字与其他元素的距离，根据设计稿的布局方式会有两种处理方式：
①
如果设计稿使用的是字号布局，那么实际应用场景中一般将字体的行高line
‑
height设置为1，即让字体的line
‑
height强行等于字体的字号大小font
‑
size，从而margin会以文字底部作为起点来衡量与其他元素距离；
②
如果设计稿使用的是行高布局，那前端设置margin时需要减去字体底部与行高底部之间的“空白”高度，该空白高度是文字基线(baseline)与文字底线(descent)之间的距离。
[0004]申请人在实现本专利技术的过程中，发现相关技术中至少存在以下问题：
[0005]1)使用字号布局方案时，强行规定行高line
‑
height虽然能解决大部分字体的展示问题，但是部分字符如“y”,“I”等，会明显超出规定区域，与视觉稿产生显著差别，影响用户体验。
[0006]2)使用行高布局方案时，设置margin需要减去的“空白”高度难以界定，相同字体在不同浏览器(Chrome、FireFox、IE)、不同平台的webview(IOS、Android)下的显示都会存在差异，增加了开发针对不同平台的调试成本。
[0007]针对上述问题，目前尚未提出有效的解决技术手段。

技术实现思路

[0008]本专利技术实施例提供一种网页代码生成方法、装置、电子设备及存储介质，以解决相关技术中网页相同字号在不同浏览器和不同场景中标准不统一，而导致文本布局显示存在差异的问题。
[0009]为了解决上述技术问题，本专利技术是这样实现的：
[0010]第一方面，本专利技术实施例提供了一种网页代码生成方法，所述方法包括：获取网页设计稿的字号，其中，所述字号对应的行高是根据所述字号以及字号行高对照表确定的，所述字号行高对照表用于确定任意一个指定字号针对多个平台的适配行高；根据所述字号和所述字号行高对照表确定所述网页设计稿中所述字号对应的目标行高；根据所述目标行高以及所述网页设计稿获得所述网页设计稿对应的网页代码。
[0011]进一步地，根据所述目标行高以及所述网页设计稿获得所述网页设计稿对应的网页代码，包括：根据所述目标行高确定所述网页代码的行高属性；根据所述行高属性将所述
网页设计稿转换为所述网页代码。
[0012]进一步地，所述根据所述字号和所述字号行高对照表确定所述网页设计稿中所述字号对应的目标行高，包括：通过预设插件根据所述字号确定所述网页设计稿中所述字号对应的目标行高；其中，所述预设插件是根据所述字号行高对照表生成的。
[0013]进一步地，在所述根据所述字号和所述字号行高对照表确定所述网页设计稿中所述字号对应的目标行高之前，还包括：将所述字号行高对照表转换为配置文件，其中，所述字号行高对照表包括多个指定字号对应的多组行高对应关系，所述行高对应关系包括所述指定字号的字体在多个平台中分别一一对应的多个平台行高；根据所述多组行高对应关系，确定所述配置文件中所述多个指定字号分别一一对应的多个适配行高；根据所述多个指定字号分别一一对应的多个适配行高生成所述预设插件。
[0014]进一步地，根据所述多组行高对应关系，确定所述配置文件中所述多个指定字号分别一一对应的多个适配行高，包括：针对每组行高对应关系，确定所述多个平台行高中的行高最大值为所述指定字号对应的适配行高；或，针对每组行高对应关系，根据所述行高最大值以及所述字号的奇偶性确定所述指定字号对应的适配行高。
[0015]进一步地，针对每组行高对应关系，根据所述行高最大值以及所述字号的奇偶性确定所述指定字号对应的适配行高，包括：在所述行高最大值与所述字号的奇偶性一致的情况下，确定所述指定字号对应的适配行高为所述行高最大值；在所述行高最大值与所述字号的奇偶性不一致的情况下，确定所述指定字号对应的适配行高为第一行高，其中，所述第一行高与所述字号的差值为偶数。
[0016]第二方面，本专利技术实施例另外提供了一种网页代码生成装置，所述装置包括：第一获取模块，用于获取网页设计稿的字号，其中，所述字号对应的行高是根据所述字号以及字号行高对照表确定的，所述字号行高对照表用于确定任意一个指定字号针对多个平台的适配行高；第一确定模块，用于根据所述字号和所述字号行高对照表确定所述网页设计稿中所述字号对应的目标行高；网页代码获得模块，用于根据所述目标行高以及所述网页设计稿获得所述网页设计稿对应的网页代码。
[0017]进一步地，所述第网页代码获得模块包括：第一确定子模块，用于根据所述目标行高确定所述网页代码的行高属性；转换子模块，用于根据所述行高属性将所述网页设计稿转换为所述网页代码。
[0018]进一步地，所述第一确定模块包括：第二确定子模块，用于通过预设插件根据所述字号确定所述网页设计稿中所述字号对应的目标行高；其中，所述预设插件是根据所述字号行高对照表生成的。
[0019]进一步地，还包括：转换子模块，用于在所述根据所述字号和所述字号行高对照表确定所述网页设计稿中所述字号对应的目标行高之前，将所述字号行高对照表转换为配置文件，其中，所述字号行高对照表包括多个指定字号对应的多组行高对应关系，所述行高对应关系包括所述指定字号的字体在多个平台中分别一一对应的多个平台行高；第三确定子模块，用于根据所述多组行高对应关系，确定所述配置文件中所述多个指定字号分别一一对应的多个适配行高；处理子模块，用于根据所述多个指定字号分别一一对应的多个适配行高生成所述预设插件。
[0020]进一步地，所述第三确定子模块，包括：第一确定单元，用于针对每组行高对应关
系，确定所述多个平台行高中的行高最大值为所述指定字号对应的适配行高；或，第二确定单元，用于针对每组行高对应关系，根据所述行高最大值以及所述字号的奇偶性确定所述指定字号对应的适配行高。
[0021]进一步地，所述第二确定单元包括：第一确定子单元，用于在所述行高最大值与所述字号的奇偶性一致的情况下，确定所述指定字号对应的适配行高为所述行高最大值；第二确定子单元，用于在所述行高最大值与所述字号的奇偶性不一致的情况下，确定所述指定字号对应的适配行高为第一行高，其中，所述第一行高与所述字号的差值为偶数。
[0022]第三方面，本专利技术实施例另外提供了一种电子设备，包括：存储器、处理器及存储在所述存储器上并可在所本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页代码生成方法，其特征在于，所述方法包括：获取网页设计稿的字号，其中，所述字号对应的行高是根据所述字号以及字号行高对照表确定的，所述字号行高对照表用于确定任意一个指定字号针对多个平台的适配行高；根据所述字号和所述字号行高对照表确定所述网页设计稿中所述字号对应的目标行高；根据所述目标行高以及所述网页设计稿获得所述网页设计稿对应的网页代码。2.根据权利要求1所述的方法，其特征在于，根据所述目标行高以及所述网页设计稿获得所述网页设计稿对应的网页代码，包括：根据所述目标行高确定所述网页代码的行高属性；根据所述行高属性将所述网页设计稿转换为所述网页代码。3.根据权利要求1所述的方法，其特征在于，所述根据所述字号和所述字号行高对照表确定所述网页设计稿中所述字号对应的目标行高，包括：通过预设插件根据所述字号确定所述网页设计稿中所述字号对应的目标行高；其中，所述预设插件是根据所述字号行高对照表生成的。4.根据权利要求3所述的方法，其特征在于，在所述根据所述字号和所述字号行高对照表确定所述网页设计稿中所述字号对应的目标行高之前，还包括：将所述字号行高对照表转换为配置文件，其中，所述字号行高对照表包括多个指定字号对应的多组行高对应关系，所述行高对应关系包括所述指定字号的字体在多个平台中分别一一对应的多个平台行高；根据所述多组行高对应关系，确定所述配置文件中所述多个指定字号分别一一对应的多个适配行高；根据所述多个指定字号分别一一对应的多个适配行高生成所述预设插件。5.根据权利要求4所述的方法，其特征在于，根据所述多组行高对应关系，确定所述配置文件中所述多个指定字号分别一一对应的多个适配行高，包括：针对每组行高对应关系，确定所述多个平台行高中的行高最大值为所述指定字号对应的适配行高；或，针对每组行高对应关系，根据所述行高最大值以及所述字号的奇偶性确定所述指定字号对应的适配行高。6.根据权利要求5所述的方法，其特征在于，针对每组行高对应关系，根据所述行高最大值以及所述字号的奇偶性确定所述指定字号对应的适配行高，包括：在所述行高最大值与所述字号的奇偶性一致的情况下，确定所述指定字号对应的适配行高为所述行高最大值；在所述行高最大值与所述字号的奇偶性不一致的情况下，确定所述指定字号对应的适配行高为第一行高，其中，所述第一行高与所述字号的差值为偶数。7.一种网页代码生成装置，其特征在于，所述装置包括：第一获取模块，用于获取网页设计稿的字号，其中，所述字号对应的行高是根据所述字号以及字号行高对照表确定的，所述字号行高对照表用于确定任意一个指定...

【专利技术属性】
技术研发人员：周晓建，黄宇荐，
申请(专利权)人：上海瑞家信息技术有限公司，
类型：发明
国别省市：