CN114020187B - 字体图标的显示方法、装置及电子设备 - Google Patents
字体图标的显示方法、装置及电子设备 Download PDFInfo
- Publication number
- CN114020187B CN114020187B CN202111250045.0A CN202111250045A CN114020187B CN 114020187 B CN114020187 B CN 114020187B CN 202111250045 A CN202111250045 A CN 202111250045A CN 114020187 B CN114020187 B CN 114020187B
- Authority
- CN
- China
- Prior art keywords
- icon
- target
- template
- font
- version
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 47
- 230000003068 static effect Effects 0.000 claims abstract description 51
- 238000009877 rendering Methods 0.000 claims abstract description 23
- 230000015654 memory Effects 0.000 claims description 31
- 238000013507 mapping Methods 0.000 claims description 25
- 238000012545 processing Methods 0.000 abstract description 9
- 230000015556 catabolic process Effects 0.000 abstract description 5
- 238000006731 degradation reaction Methods 0.000 abstract description 5
- 238000013461 design Methods 0.000 abstract description 2
- 238000004891 communication Methods 0.000 description 9
- 230000000694 effects Effects 0.000 description 7
- 238000006243 chemical reaction Methods 0.000 description 4
- 238000011161 development Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 238000001514 detection method Methods 0.000 description 3
- 238000012800 visualization Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 2
- 238000000605 extraction Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 239000007787 solid Substances 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000000802 evaporation-induced self-assembly Methods 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000007704 transition Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/35—Creation or generation of source code model driven
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
本发明涉及计算机设计技术领域，具体涉及字体图标的显示方法、装置及电子设备，所述方法包括获取当前浏览器的版本以及目标字体图标的图标名称与属性参数；基于所述当前浏览器的版本，确定目标字体图标对应的引入方式的模板；基于所述图标名称，确定与所述目标字体图标对应的静态资源文件；根据所述属性参数、所述引入方式的模板以及所述静态资源文件对所述目标字体图标进行渲染，以显示所述目标字体图标。通过基于当前浏览器的版本确定对应引入方式的模板，实现目标字体图标引入方式的优雅降级，提高了当前浏览器展现元素的丰富性，保证了多版本浏览器兼容处理的安全性，增强了字体图标代码的复用性。
Description
技术领域
本发明涉及计算机设计技术领域，具体涉及字体图标的显示方法、装置及电子设备。
背景技术
随着信息技术的不断发展，网页图标作为应用中常见的网页元素，其显示方式逐渐完成了由传统图片向字体图标的过度。传统图片图标的显示会带来大量的http请求，浪费网络资源，尽管后来考虑前端性能优化提出了雪碧图(css sprite)，很大程度减少了http请求数量，但又带来了图片定位麻烦，后期维护困难等问题；另外无论是传统图片还是雪碧图其类型都是位图，当网页元素被放大时，很难避免其会出现锯齿或失真的问题。而字体图标作为矢量图，与传统图片图标相比加载更轻量，响应更快速，变化更灵活。并且随着技术发展，字体图标已突破多重色彩的瓶颈，具有了更丰富的表现能力，摆脱了早期单色图标的界定束缚。
然而作为新的显示方式，字体图标的兼容性问题也是开发应用过程中所不能忽略的问题。目前市场上有很多免费的第三方字体图标库(矢量图库)，如ALI、Iconmoon等，每种字体图标库均提供至少一种引入方式，每种引入方式对应的图标样式不同。其中，以ALI矢量图库为例，ALI矢量图库中为字体图标提供了三种引入方式，unicode、fontClass、symbol。从功能上来讲，symbol方式展现功能最强大，可以展示彩色图标，深受市场推崇，而unicode和fontClass则还是保持单色图标。从兼容性来讲，以其对IE浏览器兼容规则为例，unicode方式兼容IE6+，fontClass方式兼容IE8+，symbol方式兼容IE9+。面对功能和兼容上的差异性，实现在追求symbol方式强大功能的同时，又对低版本浏览器做出正确的兼容处理，成了项目开发过程中不容忽视的问题。
发明内容
有鉴于此，本发明实施例提供了一种字体图标的显示方法、装置及电子设备，以解决字体图标显示时的兼容性问题。
根据第一方面，本发明实施例提供了一种字体图标的显示方法，包括：
获取当前浏览器的版本以及目标字体图标的图标名称与属性参数；
基于所述当前浏览器的版本，确定目标字体图标对应的引入方式的模板；
基于所述图标名称，确定与所述目标字体图标对应的静态资源文件；
根据所述属性参数、所述引入方式的模板以及所述静态资源文件对所述目标字体图标进行渲染，以显示所述目标字体图标。
本发明实施例提供的字体图标的显示方法，通过基于当前浏览器的版本确定对应引入方式的模板，在高版本浏览器中优先使用表现更丰富引入方式引入图标，在低版本浏览器中采用简单方式引入图标，实现目标字体图标引入方式的优雅降级，提高了当前浏览器展现元素的丰富性，保证了多版本浏览器兼容处理的安全性，增强了字体图标代码的复用性。
结合第一方面，在第一方面第一实施方式中，所述基于所述当前浏览器的版本确定目标字体图标对应的引入方式的模板，包括：
获取各种所述引入方式对应的浏览器版本兼容范围；
基于所述当前浏览器的版本查询所述浏览器版本兼容范围，确定所述目标字体图标对应的引入方式的模板。
本发明实施例提供的字体图标的显示方法，从浏览器版本兼容范围内确定对应于当前浏览器版本的引入方式的模板，提高了引入方式的模板确定效率。
结合第一方面，在第一方面第二实施方式中，所述基于所述图标名称确定建立与所述目标字体图标对应的静态资源文件，包括：
获取图标名称与静态资源文件的对应关系；
基于所述图标名称以及所述对应关系，确定所述目标字体图标对应的静态资源文件。
本发明实施例提供的字体图标的显示方法，目标字体图标的图标名称与对应关系中的图标名称一致，相应地，在获取到目标字体图标的图标名称之后，就可以利用对应关系直接确定出对应的静态资源文件，提高了对应的静态资源文件的确定效率。
结合第一方面，在第一方面第三实施方式中，所述根据所述属性参数、所述引入方式的模板以及所述静态资源文件对所述目标字体图标进行渲染，以显示所述目标字体图标，包括：
判断所述引入方式的模板是否为目标引入方式的模板；
当所述引入方式的模板为目标引入方式的模板时，对所述图标名称进行转换，确定所述图标名称对应的目标编码；
将所述目标编码填入所述引入方式的模板中，并基于所述属性参数以及所述静态资源文件对填入后的模板进行渲染，以显示所述目标字体图标。
本发明实施例提供的字体图标的显示方法，在引入方式的模板为目标引入方式的模板时，对图标名称进行转换得到对应的目标编码，保证了目标字体图标的显示效果。
结合第一方面第三实施方式，在第一方面第四实施方式中，所述对所述图标名称进行转换，确定所述图标名称对应的目标编码，包括：
获取图标名称与编码的映射列表；
基于所述图标名称查询所述图标名称与编码的映射列表，确定所述图标名称对应的目标编码。
本发明实施例提供的字体图标的显示方法，利用映射列表确定图标名称对应的目标编码，保证了目标编码确定的可靠性与效率。
结合第一方面第四实施方式，在第一方面第五实施方式中，所述获取图标名称与编码的映射列表，包括：
从目标项目文件中提取并存储所述图标名称与编码的映射列表。
本发明实施例提供的字体图标的显示方法，将映射列表存储在缓存中，可以避免多次从目标项目文件中重复提取，提高了显示效率。
结合第一方面，在第一方面第六实施方式中，所述获取当前浏览器的版本，包括：
获取所述当前浏览器对应的应用程序接口；
基于所述应用程序接口确定并存储所述当前浏览器的版本。
本发明实施例提供的字体图标的显示方法，在获取到当前浏览器的版本之后，将其存储在缓存中，后续再次进行字体图标显示时，就不需要再次进行版本检测，提高了显示效率。
根据第二方面，本发明实施例还提供了一种字体图标的显示装置，包括：
获取模块，用于获取当前浏览器的版本以及目标字体图标的图标名称与属性参数；
第一确定模块，用于基于所述当前浏览器的版本，确定目标字体图标对应的引入方式的模板；
第二确定模块，用于基于所述图标名称，确定与所述目标字体图标对应的静态资源文件；
渲染模块，用于根据所述属性参数、所述引入方式的模板以及所述静态资源文件对所述目标字体图标进行渲染，以显示所述目标字体图标。
本发明实施例提供的字体图标的显示装置，通过基于当前浏览器的版本确定对应引入方式的模板，在高版本浏览器中优先使用表现更丰富引入方式引入图标，在低版本浏览器中采用简单方式引入图标，实现目标字体图标引入方式的优雅降级，提高了当前浏览器展现元素的丰富性，保证了多版本浏览器兼容处理的安全性，增强了字体图标代码的复用性。
根据第三方面，本发明实施例提供了一种电子设备，包括：存储器和处理器，所述存储器和所述处理器之间互相通信连接，所述存储器中存储有计算机指令，所述处理器通过执行所述计算机指令，从而执行第一方面或者第一方面的任意一种实施方式中所述的字体图标的显示方法。
根据第四方面，本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储计算机指令，所述计算机指令用于使所述计算机执行第一方面或者第一方面的任意一种实施方式中所述的字体图标的显示方法。
附图说明
为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是根据本发明实施例的字体图标的显示方法的流程图；
图2是根据本发明实施例的字体图标的显示方法的流程图；
图3是根据本发明实施例的字体图标的显示方法的流程图；
图4a-图4c是根据本发明实施例的目标字体图标在不同版本IE浏览器中的呈现效果；
图5是根据本发明实施例的字体图标的显示装置的结构框图；
图6是本发明实施例提供的电子设备的硬件结构示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明实施例提供的字体图标的显示方法，可以应用在IE浏览器、google浏览器或搜狗浏览器等等，在此对具体的浏览器并不做任何限定，可以根据实际需求进行设置。该显示方法是基于电子设备上当前浏览器的版本确定目标字体图标对应的引入方式版本，再结合渲染方式显示出目标字体图标。通过该方法，针对同一目标子图图标，采用不同的引入方式模板，就可以实现不同浏览器版本之间的兼容。
根据本发明实施例，提供了一种字体图标的显示方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
在本实施例中提供了一种字体图标的显示方法，可用于电子设备，如电脑、手机、平板电脑等，图1是根据本发明实施例的字体图标的显示方法的流程图，如图1所示，该流程包括如下步骤：
S11，获取当前浏览器的版本以及目标字体图标的图标名称与属性参数。
当前浏览器的版本可以是电子设备通过当前浏览器的应用程序接口获取得到，也可以是存储在缓存中电子设备直接读取得到，或者也可以采用其他方式获得。目标字体图标为需要在当前浏览器上显示的字体图标，其图标名称与字体图标库中的名称一致。例如，字体图标库中包括多个字体图标，每个字体图标均具有唯一的图标名称，电子设备响应于用户的操作，获取到目标字体图标的图标名称；或者，电子设备提供字体图标的列表供用户选择，等等。目标字体图标的属性参数包括目标字体图标的颜色、字号、高度等属性。
其中，图标名称与属性参数均是根据实际需求进行设置的，在此对其并不做任何限定。
关于该步骤具体将在下文中进行详细描述。
S12，基于当前浏览器的版本，确定目标字体图标对应的引入方式的模板。
字体图标库提供多种字体图标的引入方式，每种引入方式均有对应的模板。例如，字体图标库提供4种字体图标的引入方式，那么对于同一个字体图标就相应存在4种引入方式的模板。以ALI矢量图库为例，其为字体图标提供了3种引入方式，unicode、fontClass、symbol，相应地，具有这3种引入方式的模板，unicode模板、fontClass模板以及symbol模板。若当前浏览器版本为IE9+，则选择symbol模板；若当前浏览器版本为IE8，则选择fontClass模板；若当前浏览器版本为IE6或IE7，则选择unicode模板。
在电子设备中存储有浏览器版本与引入方式的对应关系，即映射关系表，通过查找该映射关系表，即可确定当前浏览器版本对应的引入关系的模板。或者，在电子设备中存储有各个引入方式的模板的使用范围，即能够兼容的浏览器版本的范围，通过匹配该范围即可确定当前浏览器版本对应的引入关系的模板。
关于该步骤具体将在下文中进行详细描述。
S13，基于图标名称，确定与目标字体图标对应的静态资源文件。
静态资源文件用于对字体图标进行渲染，以用于后续的显示。静态资源库中是以图标名称进行存储对应的静态资源文件的，电子设备在获取到目标字体图标的图标名称之后，利用该图标名称进行匹配，即可确定出目标字体图标对应的静态资源文件。
S14，根据属性参数、引入方式的模板以及静态资源文件对目标字体图标进行渲染，以显示目标字体图标。
电子设备获取到属性参数之后，对引入方式的模板进行初始化。再结合静态资源文件对初始化后的模板进行渲染，即可确定出目标字体图标。即，渲染成可视化的字体图标。例如，symbol模板支持显示彩色图标，若确定的引入方式的模板为symbol模板，则将其渲染成彩色，以显示彩色的目标字体图标。unicode模板、fontClass模板仅支持单色图标，若确定的引入方式的模板为unicode模板或fontClass模板，则将其渲染成单色，以显示单色的目标字体图标。
关于该步骤具体将在下文中进行详细描述。
本实施例提供的字体图标的显示方法，通过基于当前浏览器的版本确定对应引入方式的模板，在高版本浏览器中优先使用表现更丰富引入方式引入图标，在低版本浏览器中采用简单方式引入图标，实现目标字体图标引入方式的优雅降级，提高了当前浏览器展现元素的丰富性，保证了多版本浏览器兼容处理的安全性，增强了字体图标代码的复用性。
在本实施例中提供了一种字体图标的显示方法，可用于电子设备，如电脑、手机、平板电脑等，图2是根据本发明实施例的字体图标的显示方法的流程图，如图2所示，该流程包括如下步骤：
S21，获取当前浏览器的版本以及目标字体图标的图标名称与属性参数。
详细请参见图1所示实施例的S11，在此不再赘述。
S22，基于当前浏览器的版本，确定目标字体图标对应的引入方式的模板。
具体地，上述S22包括：
S221，获取各种引入方式对应的浏览器版本兼容范围。
各个引入方式的模板均对应有浏览器版本兼容范围，该兼容范围是存储在电子设备中的，也可以是电子设备从外界获取到的，等等。例如，引入方式1的模板，浏览器版本兼容范围为V1、V2以及V3；引入方式2的模板，浏览器版本兼容范围V4以及V5；引入方式3的模板，浏览器版本兼容范围V6。
S222，基于当前浏览器的版本查询浏览器版本兼容范围，确定目标字体图标对应的引入方式的模板。
电子设备获取到当前浏览器的版本之后，利用当前浏览器的版本查询各个引入方式的模板的浏览器版本兼容范围，即可匹配出与当前浏览器的版本对应的引入方式的模板。
可选地，电子设备可以将所选择的模板存入存储单元(例如，全局变量等)，后续在当前浏览器中再次进行字体图标显示时，将不再执行当前浏览器的版本检测，提高应用的执行效率。
S23，基于图标名称，确定与目标字体图标对应的静态资源文件。
具体地，上述S23包括：
S231，获取图标名称与静态资源文件的对应关系。
电子设备中具有资源仓库，该资源仓库用于引入静态资源文件，例如，iconfront.css，iconfont.js等等。资源仓库中静态资源文件与图标名称对应，且如上文所述图标名称全局唯一。
以Icon资源仓库为例，其负载存放从ALI矢量图库下载的资源文件，其中包括多个字体文件、iconfont.css文件、css文件、iconfont.js文件以及iconfont.json文件等等。
电子设备利用图标名称建立引入方式的模板与静态资源文件的关联关系，以用于后续对引入方式的模板的渲染。
S232，基于图标名称以及对应关系，确定目标字体图标对应的静态资源文件。
电子设备利用获取到的图标名称查询该对应关系，就可以确定目标字体图标对应的静态资源文件。
S24，根据属性参数、引入方式的模板以及静态资源文件对目标字体图标进行渲染，以显示目标字体图标。
详细请参见图1所示实施例的S14，在此不再赘述。
本实施例提供的字体图标的显示方法，从浏览器版本兼容范围内确定对应于当前浏览器版本的引入方式的模板，提高了引入方式的模板确定效率。目标字体图标的图标名称与对应关系中的图标名称一致，相应地，在获取到目标字体图标的图标名称之后，就可以利用对应关系直接确定出对应的静态资源文件，提高了对应的静态资源文件的确定效率。
在本实施例中提供了一种字体图标的显示方法，可用于电子设备，如电脑、手机、平板电脑等，图3是根据本发明实施例的字体图标的显示方法的流程图，如图3所示，该流程包括如下步骤：
S31，获取当前浏览器的版本以及目标字体图标的图标名称与属性参数。
具体地，上述S31包括：
S311，获取当前浏览器对应的应用程序接口。
电子设备可以通过当前浏览器的navigator内置对象，获取到当前浏览器对应的应用程序接口；也可以通过其他方式获取对应的应用程序接口。
S312，基于应用程序接口确定并存储当前浏览器的版本。
电子设备通过访问该应用程序接口，确定出当前浏览器的版本。在确定出当前浏览器的版本之后，将其存储在缓存中，以便于后续直接从缓存中读取当前浏览器的版本。
S313，获取目标字体图标的图标名称与属性参数。
图标名称，与字体图标库下载的惊天资源中图标名称一致，且全局唯一，用来指定当前要展示的字体图标，以及建立引入方式的模板与静态资源文件的关联关系。
属性参数也可以称之为Css参数，为当前字体图标指定自定义的css样式。例如，unicode模板或fontClass模板支持字号、颜色等属性，不支持宽度、高度属性；symbol模板支持字号、宽度、高度等属性，不支持颜色属性。
S32，基于当前浏览器的版本，确定目标字体图标对应的引入方式的模板。
详细请参见图2所示实施例的S22，在此不再赘述。
S33，基于图标名称，确定与目标字体图标对应的静态资源文件。
详细请参见图2所示实施例的S23，在此不再赘述。
S34，根据属性参数、引入方式的模板以及静态资源文件对目标字体图标进行渲染，以显示目标字体图标。
具体地，上述S34包括：
S341，判断引入方式的模板是否为目标引入方式的模板。
当所述引入方式的模板为目标引入方式的模板时，执行S342；否则，执行S344。
目标引入方式的模板为需要对图标名称进行编码的模板，以使得图标名称能够适应低版本的浏览器。即，在后续在显示的时候，是基于编码后的图标名称进行显示的，而不是直接显示图标名称。
以symbol模板、unicode模板以及fontClass模板为例，当引入方式的模板为unicode模板时，由于该模板只接收unicode编码，所以需要对图标名称进行unicode转换，即执行S342；当引入方式的模板为symbol模板、fontClass模板时，可以接受图标名称，无需转换处理，可直接进入最终的可视化单元进行展示，即执行S344。
S342，对图标名称进行转换，确定图标名称对应的目标编码。
在电子设备中可以存储有图标名称与编码的对应关系，电子设备通过查找该对应关系即可确定出图标名称对应的目标编码。
在本实施例的一些可选实施方式中，上述S342可以包括：
(1)获取图标名称与编码的映射列表。
(2)基于图标名称查询图标名称与编码的映射列表，确定图标名称对应的目标编码。
若电子设备的缓存中存在图标名称与编码的映射列表，则直接获取并进行查询；若缓存中不存在图标名称与编码的映射列表，则需要从目标项目文件中提取并将其存储在缓存中，以便下次使用该映射列表时直接从缓存中读取即可。
利用映射列表确定图标名称对应的目标编码，保证了目标编码确定的可靠性与效率。将映射列表存储在缓存中，可以避免多次从目标项目文件中重复提取，提高了显示效率。
例如，电子设备查询当前寄存器中是否存有图标名称与编码的映射列表，如果没有则可以通过异步get请求或document内置api等，解析出图标名称与编码的映射列表，并将该映射列表存入当前寄存器中，以便后续重复使用，提高代码的复用率。
电子设备在获取到目标编码之后，将其填入引入方式的模板中。例如，以目标编码为unicode编码为例，电子设备获取到unicode编码之后，将其回填到unicode图标模板中。
S343，将目标编码填入引入方式的模板中，并基于属性参数以及静态资源文件对填入后的模板进行渲染，以显示目标字体图标。
电子设备利用属性参数对引入方式的模板进行初始化，再结合静态资源文件对填入后的模板进行渲染，将其渲染成可视化的字体图标。
S344，基于属性参数、引入方式的模板以及静态资源文件对目标字体图标进行渲染，以显示目标字体图标。
图4a-图4c示出了不同浏览器版本的字体图标的显示效果，图4a为彩色字体图标，图4b-图4c为单色字体图标。具体地，图4a对应于symbol模板的显示效果，当前浏览器的版本为IE9+；图4b对应于fontClass模板的显示效果，当前浏览器的版本为IE8+；图4c对应于unicode模板的显示效果，当前浏览器的版本为IE6+。
本实施例提供的字体图标的显示方法，在获取到当前浏览器的版本之后，将其存储在缓存中，后续再次进行字体图标显示时，就不需要再次进行版本检测，提高了显示效率。在引入方式的模板为目标引入方式的模板时，对图标名称进行转换得到对应的目标编码，保证了目标字体图标的显示效果。
本发明实施例提供的字体图标的显示方法，通过检测当前浏览器的版本，并根据各个引入方式的模板的兼容范围确定当前浏览器对应的模板，并将其存入寄存器中。通过个性化设置目标字体图标的属性参数，对确定的模板进行初始化，并通过图标名称查询对应的静态资源文件，以建立确定的模板与静态资源文件的关联关系，完善模板信息。最终将初始化完成的模板展现到可视化单元。若确定的模板为unicode模板，则需要经过编码转换实现由图标名称到unicode编码的转化，并最终将unicode模板展现到可视化单元，将目标字体图标展示为可视化的字体图标。
在本实施例中还提供了一种字体图标的显示装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。
本实施例提供一种字体图标的显示装置，如图5所示，包括：
获取模块41，用于获取当前浏览器的版本以及目标字体图标的图标名称与属性参数；
第一确定模块42，用于基于所述当前浏览器的版本，确定目标字体图标对应的引入方式的模板；
第二确定模块43，用于基于所述图标名称，确定与所述目标字体图标对应的静态资源文件；
渲染模块44，用于根据所述属性参数、所述引入方式的模板以及所述静态资源文件对所述目标字体图标进行渲染，以显示所述目标字体图标。
本实施例提供的字体图标的显示装置，通过基于当前浏览器的版本确定对应引入方式的模板，在高版本浏览器中优先使用表现更丰富引入方式引入图标，在低版本浏览器中采用简单方式引入图标，实现目标字体图标引入方式的优雅降级，提高了当前浏览器展现元素的丰富性，保证了多版本浏览器兼容处理的安全性，增强了字体图标代码的复用性。
本实施例中的字体图标的显示装置是以功能单元的形式来呈现，这里的单元是指ASIC电路，执行一个或多个软件或固定程序的处理器和存储器，和/或其他可以提供上述功能的器件。
上述各个模块的更进一步的功能描述与上述对应实施例相同，在此不再赘述。
本发明实施例还提供一种电子设备，具有上述图5所示的字体图标的显示装置。
请参阅图6，图6是本发明可选实施例提供的一种电子设备的结构示意图，如图6所示，该电子设备可以包括：至少一个处理器61，例如CPU(Central Processing Unit，中央处理器)，至少一个通信接口63，存储器64，至少一个通信总线62。其中，通信总线62用于实现这些组件之间的连接通信。其中，通信接口63可以包括显示屏(Display)、键盘(Keyboard)，可选通信接口63还可以包括标准的有线接口、无线接口。存储器64可以是高速RAM存储器(Random Access Memory，易挥发性随机存取存储器)，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。存储器64可选的还可以是至少一个位于远离前述处理器61的存储装置。其中处理器61可以结合图5所描述的装置，存储器64中存储应用程序，且处理器61调用存储器64中存储的程序代码，以用于执行上述任一方法步骤。
其中，通信总线62可以是外设部件互连标准(peripheral componentinterconnect，简称PCI)总线或扩展工业标准结构(extended industry standardarchitecture，简称EISA)总线等。通信总线62可以分为地址总线、数据总线、控制总线等。为便于表示，图6中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
其中，存储器64可以包括易失性存储器(英文：volatile memory)，例如随机存取存储器(英文：random-access memory，缩写：RAM)；存储器也可以包括非易失性存储器(英文：non-volatile memory)，例如快闪存储器(英文：flash memory)，硬盘(英文：hard diskdrive，缩写：HDD)或固态硬盘(英文：solid-state drive，缩写：SSD)；存储器64还可以包括上述种类的存储器的组合。
其中，处理器61可以是中央处理器(英文：central processing unit，缩写：CPU)，网络处理器(英文：network processor，缩写：NP)或者CPU和NP的组合。
其中，处理器61还可以进一步包括硬件芯片。上述硬件芯片可以是专用集成电路(英文：application-specific integrated circuit，缩写：ASIC)，可编程逻辑器件(英文：programmable logic device，缩写：PLD)或其组合。上述PLD可以是复杂可编程逻辑器件(英文：complex programmable logic device，缩写：CPLD)，现场可编程逻辑门阵列(英文：field-programmable gate array，缩写：FPGA)，通用阵列逻辑(英文：generic arraylogic,缩写：GAL)或其任意组合。
可选地，存储器64还用于存储程序指令。处理器61可以调用程序指令，实现如本申请任一实施例中所示的字体图标的显示方法。
本发明实施例还提供了一种非暂态计算机存储介质，所述计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行上述任意方法实施例中的字体图标的显示方法。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)、随机存储记忆体(Random Access Memory，RAM)、快闪存储器(Flash Memory)、硬盘(Hard DiskDrive，缩写：HDD)或固态硬盘(Solid-State Drive，SSD)等；所述存储介质还可以包括上述种类的存储器的组合。
虽然结合附图描述了本发明的实施例，但是本领域技术人员可以在不脱离本发明的精神和范围的情况下做出各种修改和变型，这样的修改和变型均落入由所附权利要求所限定的范围之内。
Claims (8)
1.一种字体图标的显示方法，其特征在于，包括：
获取当前浏览器的版本以及目标字体图标的图标名称与属性参数；
基于所述当前浏览器的版本，确定目标字体图标对应的引入方式的模板；
基于所述图标名称，确定与所述目标字体图标对应的静态资源文件；
根据所述属性参数、所述引入方式的模板以及所述静态资源文件对所述目标字体图标进行渲染，以显示所述目标字体图标；
其中，所述根据所述属性参数、所述引入方式的模板以及所述静态资源文件对所述目标字体图标进行渲染，以显示所述目标字体图标，包括：
判断所述引入方式的模板是否为目标引入方式的模板；
当所述引入方式的模板为目标引入方式的模板时，对所述图标名称进行转换，确定所述图标名称对应的目标编码；
将所述目标编码填入所述引入方式的模板中，并基于所述属性参数以及所述静态资源文件对填入后的模板进行渲染，以显示所述目标字体图标；
所述对所述图标名称进行转换，确定所述图标名称对应的目标编码，包括：
获取图标名称与编码的映射列表；
基于所述图标名称查询所述图标名称与编码的映射列表，确定所述图标名称对应的目标编码。
2.根据权利要求1所述的方法，其特征在于，所述基于所述当前浏览器的版本确定目标字体图标对应的引入方式的模板，包括：
获取各种所述引入方式对应的浏览器版本兼容范围；
基于所述当前浏览器的版本查询所述浏览器版本兼容范围，确定所述目标字体图标对应的引入方式的模板。
3.根据权利要求1所述的方法，其特征在于，所述基于所述图标名称确定建立与所述目标字体图标对应的静态资源文件，包括：
获取图标名称与静态资源文件的对应关系；
基于所述图标名称以及所述对应关系，确定所述目标字体图标对应的静态资源文件。
4.根据权利要求1所述的方法，其特征在于，所述获取图标名称与编码的映射列表，包括：
从目标项目文件中提取并存储所述图标名称与编码的映射列表。
5.根据权利要求1所述的方法，其特征在于，所述获取当前浏览器的版本，包括：
获取所述当前浏览器对应的应用程序接口；
基于所述应用程序接口确定并存储所述当前浏览器的版本。
6.一种字体图标的显示装置，其特征在于，包括：
获取模块，用于获取当前浏览器的版本以及目标字体图标的图标名称与属性参数；
第一确定模块，用于基于所述当前浏览器的版本，确定目标字体图标对应的引入方式的模板；
第二确定模块，用于基于所述图标名称，确定与所述目标字体图标对应的静态资源文件；
渲染模块，用于根据所述属性参数、所述引入方式的模板以及所述静态资源文件对所述目标字体图标进行渲染，以显示所述目标字体图标；
其中，所述根据所述属性参数、所述引入方式的模板以及所述静态资源文件对所述目标字体图标进行渲染，以显示所述目标字体图标，包括：
判断所述引入方式的模板是否为目标引入方式的模板；
当所述引入方式的模板为目标引入方式的模板时，对所述图标名称进行转换，确定所述图标名称对应的目标编码；
将所述目标编码填入所述引入方式的模板中，并基于所述属性参数以及所述静态资源文件对填入后的模板进行渲染，以显示所述目标字体图标；
所述对所述图标名称进行转换，确定所述图标名称对应的目标编码，包括：
获取图标名称与编码的映射列表；
基于所述图标名称查询所述图标名称与编码的映射列表，确定所述图标名称对应的目标编码。
7.一种电子设备，其特征在于，包括：
存储器和处理器，所述存储器和所述处理器之间互相通信连接，所述存储器中存储有计算机指令，所述处理器通过执行所述计算机指令，从而执行权利要求1-5中任一项所述的字体图标的显示方法。
8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使计算机执行权利要求1-5中任一项所述的字体图标的显示方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111250045.0A CN114020187B (zh) | 2021-10-26 | 2021-10-26 | 字体图标的显示方法、装置及电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111250045.0A CN114020187B (zh) | 2021-10-26 | 2021-10-26 | 字体图标的显示方法、装置及电子设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114020187A CN114020187A (zh) | 2022-02-08 |
| CN114020187B true CN114020187B (zh) | 2024-02-23 |
Family
ID=80057881
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111250045.0A Active CN114020187B (zh) | 2021-10-26 | 2021-10-26 | 字体图标的显示方法、装置及电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114020187B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115328353B (zh) * | 2022-08-12 | 2024-02-09 | 济南浪潮数据技术有限公司 | 一种生成iconfont资源的方法、装置以及介质 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA2289533A1 (en) * | 1997-05-15 | 1998-11-19 | Palantir Software, Inc. | Multimedia supplement for pc accessible recorded media |
| KR20150006612A (ko) * | 2013-07-09 | 2015-01-19 | 애니라인주식회사 | 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템 |
| CN105005472A (zh) * | 2015-06-25 | 2015-10-28 | 中通服公众信息产业股份有限公司 | 一种web上显示维吾尔文字的方法及装置 |
| CN109325195A (zh) * | 2018-07-23 | 2019-02-12 | 招银云创（深圳）信息技术有限公司 | 浏览器的渲染方法和系统、计算机设备、计算机存储介质 |
| CN110070161A (zh) * | 2019-03-11 | 2019-07-30 | 上海因致信息科技有限公司 | 用于条形码设计的在线设计器 |
| CN111539025A (zh) * | 2020-05-07 | 2020-08-14 | 北京五八信息技术有限公司 | 一种页面展示方法、装置、电子设备及存储介质 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9395894B2 (en) * | 2013-11-06 | 2016-07-19 | Software Ag | System and method for browser side colorizing of icon images |
-
2021
- 2021-10-26 CN CN202111250045.0A patent/CN114020187B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA2289533A1 (en) * | 1997-05-15 | 1998-11-19 | Palantir Software, Inc. | Multimedia supplement for pc accessible recorded media |
| KR20150006612A (ko) * | 2013-07-09 | 2015-01-19 | 애니라인주식회사 | 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템 |
| CN105005472A (zh) * | 2015-06-25 | 2015-10-28 | 中通服公众信息产业股份有限公司 | 一种web上显示维吾尔文字的方法及装置 |
| CN109325195A (zh) * | 2018-07-23 | 2019-02-12 | 招银云创（深圳）信息技术有限公司 | 浏览器的渲染方法和系统、计算机设备、计算机存储介质 |
| CN110070161A (zh) * | 2019-03-11 | 2019-07-30 | 上海因致信息科技有限公司 | 用于条形码设计的在线设计器 |
| CN111539025A (zh) * | 2020-05-07 | 2020-08-14 | 北京五八信息技术有限公司 | 一种页面展示方法、装置、电子设备及存储介质 |
Non-Patent Citations (2)
| Title |
|---|
| Edge浏览器使用技巧两则;王志军;;电脑知识与技术(经验技巧)(06);全文 * |
| 一种基于特征信息隐式获取的抗干扰浏览器指纹生成算法;康年华;陈明志;冯映燕;刘川葆;;信息网络安全(04);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114020187A (zh) | 2022-02-08 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9857959B2 (en) | Supporting webpage design and revision irrespective of webpage framework | |
| CN111339455A (zh) | 浏览器应用加载页面首屏的方法和装置 | |
| KR101494844B1 (ko) | 메타 데이터를 이용한 차트 변환 시스템 및 그 방법 | |
| US8645823B1 (en) | Converting static websites to resolution independent websites in a web development environment | |
| JPWO2014155742A1 (ja) | 情報処理システム、情報処理システムの制御方法、情報処理装置、情報処理装置の制御方法、情報記憶媒体、及びプログラム | |
| CN111339458A (zh) | 页面呈现方法和装置 | |
| CN111459501A (zh) | 基于SVG的Web组态画面存储与展示系统和方法及介质 | |
| CN111159597A (zh) | 骨架屏的生成方法、系统、计算机设备及存储介质 | |
| CN111880813B (zh) | 实现安卓卡片ui的方法、存储介质 | |
| US9646362B2 (en) | Algorithm for improved zooming in data visualization components | |
| CN114020187B (zh) | 字体图标的显示方法、装置及电子设备 | |
| CN111737614B (zh) | 页面显示方法、装置、电子设备和存储介质 | |
| CN112306486B (zh) | 一种界面生成方法、装置、服务器及存储介质 | |
| CN117093386B (zh) | 页面截图方法、装置、计算机设备和存储介质 | |
| US20170249292A1 (en) | Conditional determination of lookups in glyph processing | |
| CN113642642B (zh) | 控件识别方法及装置 | |
| CN114168875A (zh) | 一种页面程序的生成方法、装置、计算机设备及存储介质 | |
| AU2016266083A1 (en) | Method, system and apparatus for displaying an electronic document | |
| CN113468454A (zh) | 渲染html页面的方法和装置 | |
| CN112015406A (zh) | 数据处理方法、页面访问方法、装置、终端及服务器 | |
| CN116009863B (zh) | 前端页面渲染方法、设备及存储介质 | |
| CN114461960B (zh) | 页面生成方法、页面展示方法及装置 | |
| CN116382818A (zh) | 一种小程序多语言适配方法、装置、设备及存储介质 | |
| CN114237589A (zh) | 一种骨架屏生成方法、装置、终端设备及存储介质 | |
| CN113934953A (zh) | 网页首屏渲染方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |