CN112016267A

CN112016267A - 一种图标字体处理方法、装置及存储介质

Info

Publication number: CN112016267A
Application number: CN202010779243.5A
Authority: CN
Inventors: 殷勇
Original assignee: Beijing Dajia Internet Information Technology Co Ltd
Current assignee: Beijing Dajia Internet Information Technology Co Ltd
Priority date: 2020-08-05
Filing date: 2020-08-05
Publication date: 2020-12-01

Abstract

本公开公开了一种图标字体处理方法、装置及存储介质，涉及计算机技术领域，以至少解决相关技术中，图标字体维护困难且安全性较低的问题。该方法包括：接收到生成图标字体的生成指令后，查找层叠样式表文件中的存储路径以获取所述层叠样式表文件对应的可缩放矢量图形文件；根据所述可缩放矢量图形文件，生成所述可缩放矢量图形文件的字体文件；将所述字体文件的字体信息添加到所述层叠样式表文件中，得到修改后的层叠样式表文件；根据所述字体文件和所述修改后的层叠样式表文件生成用于在网页上显示的图标字体。这样，建立了可缩放矢量图形文件和使用该图标字体的业务项目之间的强关联性，增强了图标字体的维护性和安全性。

Description

一种图标字体处理方法、装置及存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种图标字体处理方法、装置及存储介质。

背景技术

图标字体一般由字体文件和css(Cascading Style Sheets，层叠样式表)文件构成，而字体文件和css文件通常由多个代表单个字体的svg(Scalable Vector Graphics，可缩放矢量图形)文件组合生成。在相关技术中，svg文件由第三方工具单独维护，且通过第三方工具生成字体文件和css文件，业务项目根据第三方工具生成的字体文件和css文件生成图标字体。若svg丢失或者被意外篡改，业务项目不能及时发现问题所在，存在潜在风险，从而导致维护困难且安全性较低。

发明内容

本公开实施例提供一种图标字体处理方法、装置及存储介质，以增强图标字体的维护性和安全性。

根据本公开实施例的第一方面，提供一种图标字体处理方法，包括：

接收到生成图标字体的生成指令后，查找层叠样式表文件中的存储路径以获取所述层叠样式表文件对应的可缩放矢量图形文件；

根据所述可缩放矢量图形文件，生成所述可缩放矢量图形文件的字体文件；

将所述字体文件的字体信息添加到所述层叠样式表文件中，得到修改后的层叠样式表文件；

根据所述字体文件和所述修改后的层叠样式表文件生成用于在网页上显示的图标字体。

在一种可能的实现方式中，所述根据所述可缩放矢量图形文件，生成所述可缩放矢量图形文件的字体文件，包括：

对所述可缩放矢量图形文件进行映射，得到所述可缩放矢量图形文件的字符编码；

将所述可缩放矢量图形文件的字符编码作为所述字体文件。

在一种可能的实现方式中，所述对所述可缩放矢量图形文件进行映射，得到所述可缩放矢量图形文件的字符编码，包括：

根据预设的字符集以及预设的编码规则对所述可缩放矢量图形文件进行编码，得到所述可缩放矢量图形文件的字符编码；其中，各所述可缩放矢量图形文件的字符编码不同；根据所述字符集中的字符表示所述可缩放矢量图形文件，所述编码规则是针对所述字符集中的字符与可缩放矢量图形文件对应关系的规则。

在一种可能的实现方式中，所述将所述字体文件的字体信息添加到所述层叠样式表文件中，得到修改后的层叠样式表文件，包括：

对所述层叠样式表文件进行复制，得到复制层叠样式表文件；

移除所述复制层叠样式表文件中的搜索信息；其中，所述搜索信息用于搜索可缩放矢量图形文件的存储路径；以及，

将所述字体文件的字体信息添加到所述复制层叠样式表文件中，得到修改后的层叠样式表文件。

在一种可能的实现方式中，所述将所述字体文件的字体信息添加到所述复制层叠样式表文件中，包括：

将所述字体文件的字体名称和所述字符编码添加到所述复制层叠样式表文件中；其中，所述字体文件的字体名称是根据层叠样式表文件伪元素语法生成的。

根据本公开实施例的第二方面，提供一种图标字体处理装置，包括：

获取单元，被配置为执行接收到生成图标字体的生成指令后，查找层叠样式表文件中的存储路径以获取所述层叠样式表文件对应的可缩放矢量图形文件；

生成单元，被配置为执行根据所述可缩放矢量图形文件，生成所述可缩放矢量图形文件的字体文件；

添加单元，被配置为执行将所述字体文件的字体信息添加到所述层叠样式表文件中，得到修改后的层叠样式表文件；

确定单元，被配置为执行根据所述字体文件和所述修改后的层叠样式表文件生成用于在网页上显示的图标字体。

在一种可能的实现方式中，生成单元包括：

映射子单元，被配置为执行对所述可缩放矢量图形文件进行映射，得到所述可缩放矢量图形文件的字符编码；

确定字体文件子单元，被配置为执行将所述可缩放矢量图形文件的字符编码作为所述字体文件。

在一种可能的实现方式中，映射子单元被配置为执行根据预设的字符集以及预设的编码规则对所述可缩放矢量图形文件进行编码，得到所述可缩放矢量图形文件的字符编码；其中，各所述可缩放矢量图形文件的字符编码不同；根据所述字符集中的字符表示所述可缩放矢量图形文件，所述编码规则是针对所述字符集中的字符与可缩放矢量图形文件对应关系的规则。

在一种可能的实现方式中，添加单元包括：

复制子单元，被配置为执行对所述层叠样式表文件进行复制，得到复制层叠样式表文件；

移出子单元，被配置为执行移除所述复制层叠样式表文件中的搜索信息；其中，所述搜索信息用于搜索可缩放矢量图形文件的存储路径；

添加子单元，被配置为执行将所述字体文件的字体信息添加到所述复制层叠样式表文件中，得到修改后的层叠样式表文件。

在一种可能的实现方式中，添加子单元被配置为执行将所述字体文件的字体名称和所述字符编码添加到所述复制层叠样式表文件中；其中，所述字体文件的字体名称是根据层叠样式表文件伪元素语法生成的。

根据本公开实施例的第三方面，提供一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现一种图标字体处理方法；

根据本公开实施例的第四方面，提供一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行一种图标字体处理方法；

根据本公开实施例的第五方面，提供一种计算机程序产品，包括至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本公开实施例提供的图标字体处理方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

通过在业务项目中查找层叠样式表文件中的存储路径，获取所述层叠样式表文件对应的可缩放矢量图形文件，且通过可缩放矢量图形文件生成字体文件和修改后的层叠样式表文件，最终生成图标字体。这样，建立了可缩放矢量图形文件和使用该图标字体的业务项目之间的强关联性，增强图标字体的维护性和安全性。

本公开的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本公开而了解。本公开的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

此处所说明的附图用来提供对本公开的进一步理解，构成本公开的一部分，本公开的示意性实施例及其说明用于解释本公开，并不构成对本公开的不当限定。在附图中：

图1为本公开实施例中图标字体的示意图；

图2为本公开实施例中一种图标字体处理方法的流程示意图；

图3为本公开实施例中一种图标字体处理装置的结构示意图；

图4为本公开实施方式中终端设备结构示意图。

具体实施方式

为了以增强图标字体的维护性和安全性，本公开实施例中提供一种图标字体处理方法、装置及存储介质。为了更好的理解本公开实施例提供的技术方案，这里对该方案的基本原理做一下简单说明：

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

下面结合附图介绍本公开实施例提供的技术方案。

在网页的视觉设计上，icon(图标)能够突出重点信息，发挥着举足轻重的作用；而iconfont(图标字体)在icon的基础上，升级成为一种字体文件的表现形式，相比于固定颜色的icon图片，iconfont能够灵活利用css(层叠样式表文件)控制颜色和大小。如图1所示，其为图标字体的示意图。图中的三个图标为三个图标字体。

iconfont一般由字体文件和css(Cascading Style Sheets，层叠样式表)文件构成，而字体文件和css文件通常由多个代表单个字体的svg(Scalable Vector Graphics，可缩放矢量图形)文件组合生成。图标字体存在以下优点：1、可以做出和图片一样的事情，改变透明度、旋转等；2、本质是字体，可以改变颜色、产生阴影、透明效果等；3、体积更小，但携带的信息并没有消减；4、几乎支持所有浏览器。

但是在相关技术中，svg文件由第三方工具单独维护，且通过第三方工具生成字体文件和css文件，业务项目根据第三方工具生成的字体文件和css文件生成图标字体。由于css文件中的内容与网页兼容性较高，即使出现svg丢失或者被意外篡改的情况，业务项目仍然能够正常运行，只是发生错误的图标字体发生变化，却并不能及时发现问题所在，存在潜在风险，从而导致维护困难且安全性较低。

有鉴于此，本公开为了解决以上问题，提供了一种图标字体处理方法，将svg文件单独维护在业务项目中，通过在业务项目中查找css文件中的存储路径，获取css文件对应的svg文件，且通过svg文件生成字体文件和修改后的css文件，最终生成图标字体。这样，建立了svg文件和使用该图标字体的业务项目之间的强关联性，增强图标字体的维护性和安全性。

为便于理解，下面结合附图对本公开提供的技术方案做进一步说明。

图2是根据一示例性实施例示出的一种多媒体资源推荐方法的流程图，如图2所示，包括以下步骤。

在步骤S21中，接收到生成图标字体的生成指令后，查找层叠样式表文件中的存储路径以获取所述层叠样式表文件对应的可缩放矢量图形文件。

其中，css文件为预先定义的文件。通过css文件中的存储路径，来识别该css文件所匹配的html(HyperText Markup Language，超文本标记语言)元素对特定svg字体文件的依赖。例如：若通过css文件查找到like.svg字体，则预先定义的css文件内容为：

icon-font:url(“../assets/icon/like.svg”)；

其中，“url()”是css用来引用外部资源文件的索引语法。“../assets/icon/like.svg”为svg文件的存储路径。svg文件的存储路径是对于该css文件的相对路径。

而上述css文件的内容也声明了该css文件对svg文件的依赖，一旦svg丢失或者文件名篡改，整个项目是无法构建成功的，保证了字体文件的完整性。

在步骤S22中，根据所述可缩放矢量图形文件，生成所述可缩放矢量图形文件的字体文件。

在获取到生成图标字体所需的svg文件之后，需要将获取到的svg文件转换为字体文件。其中，字体文件包括woff、ttf等格式。

而在本公开实施例中，可通过映射的方法将svg文件转换为字体文件，具体可实施为：

对所述可缩放矢量图形文件进行映射，得到所述可缩放矢量图形文件的字符编码。

在本公开实施例中，字体文件其本质上是一种字符编码到svg的映射关系。根据预设的字符集以及预设的编码规则对所述可缩放矢量图形文件进行编码，得到所述可缩放矢量图形文件的字符编码；其中，各所述可缩放矢量图形文件的字符编码不同。

其中，根据所述字符集中的字符表示所述可缩放矢量图形文件，所述编码规则是针对所述字符集中的字符与可缩放矢量图形文件对应关系的规则。例如，字符集可以选择unicode(一种字符集)、GBK(一种字符集)等字符集，编码规则可以为utf-8(一种字符编码)、utf-16(一种字符编码)等规则，本公开对此不做限定。

将所述可缩放矢量图形文件的字符编码作为所述字体文件。

例如：一个svg字符为like.svg，若该svg字符在ttf字体文件中所分配的字符编码为unicode字符集下的U+E188，那么，like.svg对应的字体文件为U+E188。

这样，每个svg文件都有一个对应的字符编码，从而可以根据字符编码表示svg文件。

在步骤S23中，将所述字体文件的字体信息添加到所述层叠样式表文件中，得到修改后的层叠样式表文件。

在本公开实施例中，由于html元素无法识别预先定义的css文件，因此在得到字体文件后，需要对css文件进行修改，使css文件变为可以被html元素所识别的文件。具体可实施为步骤A1-A3：

步骤A1：对所述层叠样式表文件进行复制，得到复制层叠样式表文件。

在本公开实施例中，由于每次都需要重新生成图标字体，即字体文件和css文件均需要重新生成，为了保证预先定义的css文件不发生变化，需要对css文件进行备份，并对复制的css文件进行修改。

步骤A2：移除所述复制层叠样式表文件中的搜索信息；其中，所述搜索信息用于搜索可缩放矢量图形文件的存储路径。

步骤A3：将所述字体文件的字体信息添加到所述复制层叠样式表文件中，得到修改后的层叠样式表文件。

需要说明的是，步骤A2和步骤A3执行顺序不受限。

其中，字体信息包括字符编码和字体名称。字符编码为字体文件中的字符编码，字体名称为在html元素中声明的名称。

在本公开实施例中，将所述字体文件的字体名称和所述字符编码添加到所述复制层叠样式表文件中；其中，所述字体文件的字体名称是根据层叠样式表文件伪元素语法生成的。

在本公开实施例中，若要让css文件所描述的html元素显示出其引用的svg文件所对应的字体文件中的字符，这必须让其文本内容为指定的字符编码才可以。

例如，某html元素的css文件引用的字体是like.svg，假设该svg字符在ttf字体文件中所分配的unicode为U+E188，则该html元素的内容必须是\e188，才能显示出与like.svg同样的图像。

通过css文件的伪元素语法，可以在css文件中操纵html元素内容。如下所示：

like::before{

content:“\e188”；

}

上述示例的语义为，在该元素内部的最前面(或者最后面，like::after)，增加一个元素，其内容为字符“\e188”。如果该html元素没有其它后代元素，包括文本，那么该“\e188”字符即成为该元素的全部内容。

于是，在本公开实施例中，只能在伪元素中定义icon-font属性，才能自动使用到字符icon的便利性。

在了解了css文件的伪元素的用法之后，若要在html元素中使用一个字体文件，需要对该字体文件声明一个字体名称。其中字体名称为随机生成的名称。例如：声明一个@font-face自定义字体，其内容为：

@font-face{

font-family:“custom-font-name”；

src:url(…/iconfont.ttf)；

}

其中，src指定的是字体文件的存储路径，Font-family指定了该字体的名称，可动态生成一个确保很难与其它现有字体名重复的名称，比如可以使用ttf字体文件的md5值的36进制字符串表示。

在获取了字体文件的字体名称后，将该字体名称和字符编码添加到复制的css文件中，并将css文件中的搜索信息移出，这样，经过处理得到的修改后的css文件的内容为：

{

font-family:“custom-font-name”；

content:“\e188”；

}

这样，在生成图标字体时，操作系统会找到该ttf字体中间中对应unicode值为\e188的字符图像，渲染在html元素内部，从而达成了显示对应图形的目的。且通过对css文件进行修改，使得html元素可以识别css文件，建立了svg字体文件和使用该字体的html元素之间的强关联性。

在步骤S24中，根据所述字体文件和所述修改后的层叠样式表文件生成用于在网页上显示的图标字体。

这样，建立了svg文件和使用该图标字体的业务项目之间的强关联性，增强图标字体的维护性和安全性。

在本公开实施例中，若要对图标字体进行维护，则通过运行css文件来再次生成字体文件和修改后的css文件，若运行报错，则可以确定svg文件是否被篡改或者丢失。

基于相同的发明构思，本公开还提供一种图标字体处理装置。如图3所示，为本公开提供的一种图标字体处理装置示意图。该装置包括：

获取单元301，被配置为执行接收到生成图标字体的生成指令后，查找层叠样式表文件中的存储路径以获取所述层叠样式表文件对应的可缩放矢量图形文件；

生成单元302，被配置为执行根据所述可缩放矢量图形文件，生成所述可缩放矢量图形文件的字体文件；

添加单元303，被配置为执行将所述字体文件的字体信息添加到所述层叠样式表文件中，得到修改后的层叠样式表文件；

确定单元304，被配置为执行根据所述字体文件和所述修改后的层叠样式表文件生成用于在网页上显示的图标字体。

在一种可能的实现方式中，生成单元302包括：

在一种可能的实现方式中，添加单元303包括：

如图4所示，基于同一技术构思，本公开实施例还提供了一种电子设备40，可以包括存储器401和处理器402。

所述存储器401，用于存储处理器402执行的计算机程序。存储器401可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据任务管理装置的使用所创建的数据等。处理器402，可以是一个中央处理单元(central processing unit，CPU)，或者为数字处理单元等等。本公开实施例中不限定上述存储器401和处理器402之间的具体连接介质。本公开实施例在图4中以存储器401和处理器402之间通过总线403连接，总线403在图4中以粗线表示，其它部件之间的连接方式，仅是进行示意性说明，并不引以为限。所述总线403可以分为地址总线、数据总线、控制总线等。为便于表示，图4中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器401可以是易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)；存储器401也可以是非易失性存储器(non-volatilememory)，例如只读存储器，快闪存储器(flash memory)，硬盘(hard disk drive，HDD)或固态硬盘(solid-state drive，SSD)、或者存储器401是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器401可以是上述存储器的组合。

处理器402，用于调用所述存储器401中存储的计算机程序时执行如图2中所示的实施例中设备所执行的方法。

在一些可能的实施方式中，本公开提供的方法的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在计算机设备上运行时，所述程序代码用于使所述计算机设备执行本说明书上述描述的根据本公开各种示例性实施方式的方法中的步骤，例如，所述计算机设备可以执行如图1～图2中所示的实施例中设备所执行的方法。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

尽管已描述了本公开的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本公开范围的所有变更和修改。本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims

1.一种图标字体处理方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，所述根据所述可缩放矢量图形文件，生成所述可缩放矢量图形文件的字体文件，包括：

将所述可缩放矢量图形文件的字符编码作为所述字体文件。

3.根据权利要求2所述的方法，其特征在于，所述对所述可缩放矢量图形文件进行映射，得到所述可缩放矢量图形文件的字符编码，包括：

4.根据权利要求1所述的方法，其特征在于，所述将所述字体文件的字体信息添加到所述层叠样式表文件中，得到修改后的层叠样式表文件，包括：

5.根据权利要求4所述的方法，其特征在于，所述将所述字体文件的字体信息添加到所述复制层叠样式表文件中，包括：

6.一种图标字体处理装置，其特征在于，包括：

7.根据权利要求6所述的装置，其特征在于，生成单元包括：

8.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至5中任一项所述的图标字体处理方法。

9.一种存储介质，其特征在于，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1至5中任一项所述的图标字体处理方法。

10.一种计算机程序产品，其特征在于，其包括程序代码，当所述程序产品在电子设备上运行时，所述程序代码用于使所述电子设备执行权利要求1至5中任一所述方法的步骤。