CN108073585A - 网络字体加载方法、装置和系统 - Google Patents

Abstract

本发明公开了一种网络字体加载方法、装置和系统。其中，该方法包括：获取当前网页的静态文本内容中的第一文本字符，并存储至前端字符缓存库中；检测当前网页中更新的动态文本内容的第二文本字符，在前端字符缓存库中查询第二文本字符；将未在前端字符缓存库查询到的文本字符加入到前端字符缓存库中，得到更新后的前端字符缓存库；获取更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据网络字体文件，加载网页的网络字体，其中，网络字体文件至少包括：网络字体名称和访问网络字体的路径。本发明解决了现有技术无法实现动态页面中按需加载Webfont文件造成网页加载速度慢、浪费服务器带宽的技术问题。

Description

网络字体加载方法、装置和系统

技术领域

本发明涉及浏览器文本显示技术领域，具体而言，涉及一种网络字体加载方法、装置和系统。

背景技术

随着互联网技术的发展，为了达到良好的显示效果，在网页前端开发设计中，通常会使用一些特殊的字体，但是不能保证用户的设备系统中已安装此种字体，若没有安装，则显示达不到理想效果，这在数据可视化的页面中问题尤其严重。网站文字的字体是依据在css样式中设置的font-family来决定的，若font-family中设置的字体在用户访问网站使用的设备系统中未安装，则系统会使用系统默认字体代替。

Webfont技术可以使网页使用在线字体，从而满足用户对网页字体显示的需求。现有技术主要采用以下两种方案实现网络字体的加载。

方案一，将所使用的字体打包成webfont文件，通过自定义font-face，从而在定义font-family时指定font-face定义的字体，浏览器会自动从font-face中定义路径的加载webfont相关文件，网站即可使用webfont文件。对于西文字符，由于字体库体积较小，打包的webfont文件加载速度较快，几乎不会对网站加载速度造成影响，但是对于中文字体，由于打包webfont时一般不知道需要哪些字，通常将所有字符打包，这样导致的结果是webfont文件大小急剧膨胀，可高达20M以上，如此大的体积会严重影响网页加载速度，同时浪费了服务器带宽。

方案二，扫描页面中所有文字，将所使用的字符按抵用的字体打包成webfont文件，通过自定义font-face，从而在定义font-family时指定font-face定义的字体，浏览器会自动从font-face中定义路径的加载webfont，网站即可使用webfont文件。该方案只适用于网页的静态页面在服务器端时已经确定页面内容和文字，在服务端能够扫描此页面中的文字，并打包webfont文件。但是对于内容是动态生成的页面则无法实现。

针对上述现有技术无法实现动态页面中按需加载Webfont文件造成网页加载速度慢、浪费服务器带宽的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种网络字体加载方法、装置和系统，以至少解决现有技术无法实现动态页面中按需加载Webfont文件造成网页加载速度慢、浪费服务器带宽的技术问题。

根据本发明实施例的一个方面，提供了一种网络字体加载方法，包括：获取当前网页的静态文本内容中的第一文本字符，并存储至前端字符缓存库中；检测当前网页中更新的动态文本内容的第二文本字符，在前端字符缓存库中查询第二文本字符；将未在前端字符缓存库查询到的文本字符加入到前端字符缓存库中，得到更新后的前端字符缓存库；获取更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据网络字体文件，加载网页的网络字体，其中，网络字体文件至少包括：网络字体名称和访问网络字体的路径。

进一步地，获取当前网页的静态文本内容中的第一文本字符包括：通过扫描网页中HTML DOM元素的各个TextNode节点内容来获取第一文本字符。

进一步地，在检测网页中更新的动态文本内容的第二文本字符之前，包括：通过ajax加载生成动态文本内容。

进一步地，在获取更新后的前端字符缓存库中的文本字符的网络字体文件，并根据网络字体文件，加载网页的网络字体之前，方法还包括：前端设备将更新后的前端字符缓存库中的文本字符发送至后台服务器；后台服务器接收文本字符，并根据文本字符生成相应的网络字体文件。

进一步地，后台服务器接收文本字符，并根据文本字符生成相应的网络字体文件包括：后台服务器根据接收到的文本字符，创建相应的网络字体；设置访问网络字体的路径和指向路径的网络字体名称；根据路径和指向路径的网络字体名称生成网络字体文件。

进一步地，在根据路径和指向路径的网络字体名称，生成网络字体文件之后，方法还包括：后台服务器将网络字体文件返回至前端设备。

进一步地，获取更新后的前端字符缓存库中的文本字符的网络字体文件，并根据网络字体文件，加载网页的网络字体包括：获取网络字体文件中的网络字体名称；根据网络字体名称对应的路径，加载网页的网络字体。

根据本发明实施例的另一方面，还提供了一种网络字体加载系统，包括：前端设备，用于获取当前网页的静态文本内容中的第一文本字符，并存储至前端字符缓存库中；检测当前网页中更新的动态文本内容的第二文本字符，在前端字符缓存库中查询第二文本字符，将未在前端字符缓存库查询到的文本字符加入到前端字符缓存库中，得到更新后的前端字符缓存库；获取更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据网络字体文件，加载网页的网络字体，其中，网络字体文件至少包括：网络字体名称和访问网络字体的路径；后台服务器，用于接收更新后的前端字符缓存库中的文本字符，并根据文本字符生成相应的网络字体文件。

根据本发明实施例的另一方面，还提供了一种网络字体加载装置，包括：第一获取模块，用于获取当前网页的静态文本内容的中第一文本字符，并存储至前端字符缓存库中；检测模块，用于检测当前网页中更新的动态文本内容的第二文本字符，在前端字符缓存库中查询第二文本字符；更新模块，用于将未在前端字符缓存库查询到的文本字符加入到前端字符缓存库中，得到更新后的前端字符缓存库；第一处理模块，用于获取更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据网络字体文件，加载网页的网络字体，其中，网络字体文件至少包括：网络字体名称和访问网络字体的路径。

进一步地，上述第一获取模块包括：扫描模块，用于扫描网页中HTML DOM元素的各个TextNode节点内容来获取第一文本字符。

进一步地，上述装置还包括：第一加载模块，用于通过ajax加载生成动态文本内容。

进一步地，上述装置还包括：第一发送模块，用于前端设备将更新后的前端字符缓存库中的文本字符发送至后台服务器；第二处理模块，用于后台服务器接收文本字符，并根据文本字符生成相应的网络字体文件。

进一步地，上述装置还包括：创建模块，用于后台服务器根据接收到的文本字符，创建相应的网络字体；设置模块，用于访问网络字体的路径和指向路径的网络字体名称；生成模块，用于路径和指向路径的网络字体名称，生成网络字体文件。

进一步地，上述装置还包括：第二发送模块，用于后台服务器将网络字体文件返回至前端设备。

进一步地，上述处理模块还包括：第二获取模块，用于获取网络字体文件中的网络字体名称；第二加载模块，用于根据网络字体名称对应的路径，加载网页的网络字体。

在本发明实施例中，采用建立前端字符缓存的的方式，通过获取当前网页的静态文本内容中的第一文本字符，并存储至前端字符缓存库中；检测网页中更新的动态文本内容的第二文本字符，在前端字符缓存库中查询第二文本字符；将查询失败的文本字符加入到前端字符缓存库中，得到更新后的前端字符缓存库；获取更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据网络字体文件，加载网页的网络字体，其中，网络字体文件至少包括：网络字体名称和访问网络字体的路径，达到了自动检测页面动态生成的文本内容中包含的文本字符，按照实际显示字符的需要动态加载网络字体的目的，从而实现了动态页面中按需加载网络字体、提升网页加载效率的技术效果，进而解决了现有技术无法实现动态页面中按需加载Webfont文件造成网页加载速度慢、浪费服务器带宽的技术问题。

附图说明

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

图1是根据本发明实施例的一种网络字体加载方法流程图；

图2是根据本发明实施例的一种可选的网络字体加载方法流程图；

图3是根据本发明实施例的一种可选的网络字体加载方法流程图；

图4是根据本发明实施例的一种可选的网络字体加载方法流程图；

图5是根据本发明实施例的一种可选的采用前后端结合方式的网络字体加载系统示意图；

图6是根据本发明实施例的一种可选的动态网页中网络字体加载的具体实现方法流程图；

图7是根据本发明实施例的一种网络字体加载系统示意图；以及

图8是根据本发明实施例的一种网络字体加载装置示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例1

根据本发明实施例，提供了一种网络字体加载方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的一种网络字体加载方法流程图，如图1所示，该方法包括如下步骤：

步骤S102，获取当前网页的静态文本内容中的第一文本字符，并存储至前端字符缓存库中。

具体地，在上述步骤中，上述静态文本内容可以是通过浏览器加载完页面资源后html页面中的全部文本内容；上述第一文本字符可以为上述html页面中文本内容包含的文本字符；上述前端字符缓存库可以为前端设备的一个本地存储空间，其中，前端设备可以为能够访问互联网的设备，可以是计算机、平板电脑和智能手机等；在访问网页的时候，获取当前网页的静态文本内容中包含的所有文本字符，并将获取的文本字符存储至前端设备的字符缓存库中。

步骤S104，检测当前网页中更新的动态文本内容的第二文本字符，在前端字符缓存库中查询第二文本字符。

具体地，在上述步骤中，上述动态文本内容可以是页面中加载的动态文本内容；上述第二文本字符可以为上述动态文本内容中包含的文本字符；通过检测网页中更新的动态文本内容中包含的文本字符，并在上述前端设备的字符缓存库中查询上述更新的动态文本内容中包含的文本字符是否都在上述字符缓存库中。

此处需要说明的是，在访问互联网的过程中，当浏览器加载完所有页面资源后，将html页面中内容全部视为静态内容，页面程序通过其他方式加载的内容称为动态内容。容易注意，页面通过iframe的形式加载的其他html页面，也视为静态内容；而通过ajax形式加载的数据视为动态内容。

步骤S106，将未在前端字符缓存库查询到的文本字符加入到前端字符缓存库中，得到更新后的前端字符缓存库。

具体地，在上述步骤中，通过在上述前端设备的字符缓存库中查询上述更新的动态文本内容中包含的文本字符是否都在上述字符缓存库中，将上述前端设备的字符缓存库中不存在的文本字符加入到前端字符缓存库中，得到更新后的前端字符缓存库。

步骤S108，获取更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据网络字体文件，加载网页的网络字体，其中，网络字体文件至少包括：网络字体名称和访问网络字体的路径。

具体地，在上述步骤中，上述网络字体文件可以为显示页面中文本字符需要的字体文件，包括网络字体名称和访问网络字体的路径；在得到更新后的前端字符缓存库后，获取上述更新后的前端缓存字符库中的文本字符所需要的网络字体文件，并根据网络字体文件中包含的访问网络字体的路径，加载网页所需要的网络字体。

此处需要说明的是，网站文字的字体是依据在css样式中设置的font-family来决定的，若font-family中设置的字体在用户访问网站使用的设备系统中未安装，则系统会使用系统默认字体代替。在前端开发过程中，为了达到良好的显示效果，通常会使用一些特殊的字体，但是不能保证用户的设备系统中已安装此种字体，若没有安装，则可以通过加载网络字体来达到显示效果，即通过加载显示文本字符所需要的网络字体文件，通过网络字体文件中包含的访问网络字体的路径，来加载相应的显示文本字符所需要的字体。

由上可知，在本申请上述实施例中，采用建立前端字符缓存的方式，通过获取页面中静态文本内容包含的文本字符，存储至前端字符缓存库中，并实时检测页面中更新的动态文本内容包含的文本字符，与前端字符缓存库中已经存储的文本字符比对，将前端字符缓存库中不存在的文本字符继续添加到前端字符缓存库中得到更新后的前端文本字符库，根据更新后的前端文本字符缓存库中的文本字符所需要的网络字体文件中包含的访问网络字体的路径，加载相应的网络字体，达到了自动检测页面动态生成的文本内容中包含的文本字符，按照实际显示字符的需要动态加载网络字体的目的，实现了动态页面中按需加载网络字体、提升网页加载效率的技术效果。

在一种可选的实施例中，获取当前网页的静态文本内容中的第一文本字符包括：通过扫描网页中HTML DOM元素的各个TextNode节点内容来获取第一文本字符。

在上述实施例中，通过前端字符扫描装置扫描网页中HTML DOM元素的各个TextNode节点内容来获取当前网页中的文本字符。

通过上述实施例，实现了获取网页中静态内容的文本字符的目的。

在一种可选的实施例中，在检测当前网页中更新的动态文本内容的第二文本字符之前，上述方法还包括：通过ajax加载生成动态文本内容。

在上述实施例中，ajax为前端设备进行数据请求的方式，通过该方式，前端设备可以从后台服务器获取需要的数据；在检测网页中更新的动态文本内容的第二文本字符之前，前端设备的浏览器需要通过ajax加载页面的动态内容，包括动态内容中的文本内容。

在一种可选的实施例中，在获取更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据网络字体文件，加载网页的网络字体之前，如图2所示，上述方法还包括如下步骤：

步骤S202，前端设备将更新后的前端字符缓存库中的文本字符发送至后台服务器；

步骤S204，后台服务器接收文本字符，并根据文本字符生成相应的网络字体文件。

在上述步骤中，上述前端设备可以为访问互联网页面的设备，可以是计算机、平板电脑和手机等；上述后台服务器可以为存储网络字体的云计算设备；在前端设备根据动态文本内容中包含的文本字符得到更新后的前端字符缓存库后，将更新后的前端字符缓存库中包含的文本字符通过互联网发送至后台服务器，后台服务器接收到上述文本字符后，根据文本字符生成相应的网络字体文件，其中，网络字体文件至少包括：网络字体名称和访问该网络字体的路径。

通过上述步骤，实现了按照网页实际显示字符的需要生成网络字体文件的目的。

在一种可选的实施例中，如图3所示，后台服务器接收文本字符，并根据文本字符生成相应的网络字体文件，可以包括如下步骤：

步骤S302，后台服务器根据接收到的文本字符，创建相应的网络字体；

步骤S304，设置访问网络字体的路径和指向路径的网络字体名称；

步骤S306，根据路径和指向路径的网络字体名称生成网络字体文件。

在上述步骤中，后台服务器接收到前端设备请求显示的文本字符后，创建相应的网络字体，并设置访问网络字体的路径和指向该路径的网络字体名称，根据该路径和指向该路径的网络字体名称，生成相应的网络字体文件。

通过上述步骤，实现了生成包含网络字体路径和指向该路径的网络字体名称的网络字体文件的目的。

在一种可选的实施例中，在根据路径和指向路径的网络字体名称，生成网络字体文件之后，上述方法还可以包括：步骤S308，后台服务器将网络字体文件返回至前端设备。

通过上述实施例，后台服务器将网络字体文件返回至前端设备后，前端设备可以通过该网络字体文件中包含的网络字体路径访问相应的网络字体。

在一种可选的实施例中，如图4所示，获取更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据网络字体文件，加载网页的网络字体，可以包括如下步骤：

步骤S402，获取网络字体文件中的网络字体名称；

步骤S404，根据网络字体名称对应的路径，加载网页的网络字体。

在上述步骤中，前端设备在获取更新后的前端字符缓存库中文本字符所对应的网络字体文件后，可以通过获取网络字体文件中的网络字体名称，根据该网络字体名称对应的路径，加载相应的网络字体。

通过上述步骤，实现了根据网络字体的路径来加载页面所需要的网络字体的目的，

作为一种优选的实施方式，可以结合图5和图6来说明本申请上述实施例，其中，图5所示为一种可选的采用前后端结合方式的网络字体加载系统示意图；图6所示为一种可选的动态网页中网络字体加载的具体实现方法流程图。如图5所示，该网络字体加载系统包括：前端设备和后端服务器；其中，前端设备包括：前端webfont加载装置、前端字符扫描装置、前端动态字符过滤装置和前端字符缓存装置；后端服务器包括：后端webfont文件生成装置。

具体地，上述前端webfont加载装置，用于根据后端生成的定义font-face的css文件路径，在页面中加载此css文件，并且动态修改页面中使用的font-family为font-face中定义的字体名称；前端字符扫描装置，用于扫描HTML DOM元素的各个TextNode节点内容，并且加入前端字符缓存中；前端动态字符过滤装置，用于将动态生成内容中包含的文本字符与前端字符缓存中的文本字符对比，将不存在的文本字符加入前端字符缓存中；前端字符缓存装置，用于缓存当前页面中使用的字符，若缓存中没有指定字符，则需要重新生成webfont相关文件并重新加载定义font-face的css文件。

如图6所示为一种可选的动态网页中网络字体加载的具体实现方法流程图，包括如下步骤：

步骤S602，通过前端字符扫描装置扫描HTML DOM元素的文本节点内容，并将得到的文本字符加入字符缓存中。

在上述步骤中，当页面加载完成后，使用javascript在window对象上附加onload事件，使用前端字符扫描装置，扫描HTML DOM元素的文本节点内容，并将得到的字符加入字符缓存中。代码细节如下：

步骤S604，遍历整个HTML DOM树，获取DOM元素文本节点。

在上述步骤中，前端字体扫描装置可以一次遍历整个HTML DOM树，获取DOM元素的TextNode节点，获取字符的函数代码如下：

步骤S606，将字符缓存装置中的文本字符传递到后端服务器。

在上述步骤中，将字符缓存装置中的字符传递到后端，等待后端处理完毕后，返回定义font-face的css文件路径，并将此路径的css文件引入到页面中。在步骤604得到的文字内容只为加载页面已经确认的字符，顾在步骤602中代码补充如下代码：

步骤608，后端webfont文件生成装置生成webfont相关文件和css文件，并将css文件返回至前端设备。

在上述步骤中，在步骤606，前端设备向后端服务器传递了文本字符，后端服务器接收到文本字符后，生成webfont相关文件，并且生成一个css文件，此css文件中包含了font-face的声明，在font-face的声明中需要指定生成的webfont的相关文件路径及字体名称，并将css文件路径返回给前端。

步骤S610，前端设备接收后端服务器返回的css文件，在HTML BODY标签末尾加入此css文件。

在上述步骤中，前端设备接收到后端服务器返回的css文件路径，在HTML BODY标签的末尾引入此css文件即可达到按需加载webfont的目的。

步骤S612，前端动态字符过滤装置从ajax的请求结果中过滤前端字符缓存装置中没有的字符。

在上述步骤中，对于动态生成的内容，是通过ajax加载的，顾在ajax加载完成后，动态字符过滤装置会从ajax的请求结果中过滤缓存中没有的字符，然后重复步骤S604至S610的过程即可。代码说明如下：function getCharFromAjaxResult(data){

上述代码实现的功能是从一个ajax的请求结果中解析出使用的字符。

此处需要说明的是，由于iframe加载的html文件相对正常页面的加载属于另外页面的内容，另外加载的页面若需要webfont按需加载，只需在iframe加载的页面中加入本方案中提到的代码即可。

本申请上述实施例，自动发现页面中DOM元素的文本节点字符，自动发现ajax请求中的文本字符，并且为了提高效率加入字符缓存，若字符缓存中没有，则告知后端服务器生成webfont文件和定义font-face的css文件，通过上述实施例提供的技术方案可以实现以下技术效果：能够按照实际显示字符的需要动态加载webfont及定义font-face的文件，极大的提高页面的加载速度，能够在不支持某个字体的设备上显示与正常页面一致的效果。

实施例2

根据本发明实施例，还提供了一种网络字体加载系统实施例。本发明实施例1中的网络字体加载方法可以在本发明实施例2提供的系统实施例中执行。

图7是根据本发明实施例的一种网络字体加载系统示意图，如图7所示，该系统包括：前端设备701和后台服务器703。

前端设备701，用于获取当前网页的静态文本内容中的第一文本字符，并存储至前端字符缓存库中；检测当前网页中更新的动态文本内容的第二文本字符，在前端字符缓存库中查询第二文本字符，将未在前端字符缓存库查询到的文本字符加入到前端字符缓存库中，得到更新后的前端字符缓存库；获取更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据网络字体文件，加载网页的网络字体，其中，网络字体文件至少包括：网络字体名称和访问网络字体的路径；

后台服务器703，用于接收更新后的前端字符缓存库中的文本字符，并根据文本字符生成相应的网络字体文件。

由上可知，在本申请上述实施例中，采用建立前端字符缓存的方式，通过获取页面中静态文本内容包含的文本字符，存储至前端字符缓存库中，并实时检测页面中更新的动态文本内容包含的文本字符，与前端字符缓存库中已经存储的文本字符比对，将前端字符缓存库中不存在的文本字符继续添加到前端字符缓存库中得到更新后的前端文本字符库，根据更新后的前端文本字符缓存库中的文本字符所需要的网络字体文件中包含的访问网络字体的路径，加载相应的网络字体，达到了自动检测页面动态生成的文本内容中包含的文本字符，按照实际显示字符的需要动态加载网络字体的目的，实现了动态页面中按需加载网络字体、提升网页加载效率的技术效果。

在一种可选的实施例中，上述前端设备701还用于通过扫描网页中HTML DOM元素的各个TextNode节点内容来获取第一文本字符。

在一种可选的实施例中，上述前端设备701还用于通过ajax加载生成动态文本内容。

在一种可选的实施例中，上述前端设备701还用于将更新后的前端字符缓存库中的文本字符发送至后台服务器；上述后台服务器703还用于接收文本字符，并根据文本字符生成相应的网络字体文件。

在一种可选的实施例中，上述后台服务器703还用于根据接收到的文本字符，创建相应的网络字体；设置访问网络字体的路径和指向路径的网络字体名称；根据路径和指向路径的网络字体名称，生成网络字体文件。

在一种可选的实施例中，上述后台服务器703还用于将网络字体文件返回至前端设备。

在一种可选的实施例中，上述前端设备701还用于获取网络字体文件中的网络字体名称；根据网络字体名称对应的路径，加载网页的网络字体。

实施例3

根据本发明实施例，还提供了一种网络字体加载装置实施例。本发明实施例1中的网络字体加载方法可以在本发明实施例2提供的装置实施例中执行。

图8是根据本发明实施例的一种网络字体加载装置示意图，如图8所示，该系统包括：第一获取模块801、检测模块803、更新模块805和第一处理模块807。

其中，第一获取模块801，用于获取当前网页的静态文本内容的中第一文本字符，并存储至前端字符缓存库中；检测模块803，用于检测当前网页中更新的动态文本内容的第二文本字符，在前端字符缓存库中查询第二文本字符；更新模块805，用于将未在前端字符缓存库查询到的文本字符加入到前端字符缓存库中，得到更新后的前端字符缓存库；第一处理模块807，用于获取更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据网络字体文件，加载网页的网络字体，其中，网络字体文件至少包括：网络字体名称和访问网络字体的路径。

由上可知，在本申请上述实施例中，采用建立前端字符缓存的方式，通过获取页面中静态文本内容包含的文本字符，存储至前端字符缓存库中，并实时检测页面中更新的动态文本内容包含的文本字符，与前端字符缓存库中已经存储的文本字符比对，将前端字符缓存库中不存在的文本字符继续添加到前端字符缓存库中得到更新后的前端文本字符库，根据更新后的前端文本字符缓存库中的文本字符所需要的网络字体文件中包含的访问网络字体的路径，加载相应的网络字体，达到了自动检测页面动态生成的文本内容中包含的文本字符，按照实际显示字符的需要动态加载网络字体的目的，实现了动态页面中按需加载网络字体、提升网页加载效率的技术效果。

在一种可选的实施例中，上述获取模块包括：扫描模块，用于扫描网页中HTML DOM元素的各个TextNode节点内容来获取第一文本字符。

在一种可选的实施例中，上述装置还包括：第一加载模块，用于通过ajax加载生成动态文本内容。

在一种可选的实施例中，上述装置还包括：第一发送模块，用于前端设备将更新后的前端字符缓存库中的文本字符发送至后台服务器；第二处理模块，用于后台服务器接收文本字符，并根据文本字符生成相应的网络字体文件。

在一种可选的实施例中，上述装置还包括：创建模块，用于后台服务器根据接收到的文本字符，创建相应的网络字体；设置模块，用于访问网络字体的路径和指向路径的网络字体名称；生成模块，用于路径和指向路径的网络字体名称，生成网络字体文件。

在一种可选的实施例中，上述装置还包括：第二发送模块，用于后台服务器将网络字体文件返回至前端设备。

在一种可选的实施例中，上述处理模块还包括：第二获取模块，用于获取网络字体文件中的网络字体名称；第二加载模块，用于根据网络字体名称对应的路径，加载网页的网络字体。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种网络字体加载方法，其特征在于，包括：

获取当前网页的静态文本内容中的第一文本字符，并存储至前端字符缓存库中；

检测所述当前网页中更新的动态文本内容的第二文本字符，在所述前端字符缓存库中查询所述第二文本字符；

将未在所述前端字符缓存库查询到的文本字符加入到所述前端字符缓存库中，得到更新后的前端字符缓存库；

获取所述更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据所述网络字体文件，加载所述网页的网络字体，其中，所述网络字体文件至少包括：网络字体名称和访问所述网络字体的路径。

2.根据权利要求1所述的方法，其特征在于，获取当前网页的静态文本内容中的第一文本字符包括：通过扫描所述网页中HTML DOM元素的各个TextNode节点内容来获取所述第一文本字符。

3.根据权利要求1所述的方法，其特征在于，在检测所述当前网页中更新的动态文本内容的第二文本字符之前，包括：通过ajax加载生成所述动态文本内容。

4.根据权利要求1所述的方法，其特征在于，在获取所述更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据所述网络字体文件，加载所述网页的网络字体之前，所述方法还包括：

前端设备将所述更新后的前端字符缓存库中的文本字符发送至后台服务器；

所述后台服务器接收所述文本字符，并根据所述文本字符生成相应的网络字体文件。

5.根据权利要求4所述的方法，其特征在于，所述后台服务器接收所述文本字符，并根据所述文本字符生成相应的网络字体文件包括：

所述后台服务器根据接收到的所述文本字符，创建相应的网络字体；

设置访问所述网络字体的路径和指向所述路径的网络字体名称；

根据所述路径和指向所述路径的网络字体名称生成所述网络字体文件。

6.根据权利要求5所述的方法，其特征在于，在根据所述路径和指向所述路径的网络字体名称，生成所述网络字体文件之后，所述方法还包括：所述后台服务器将所述网络字体文件返回至所述前端设备。

7.根据权利要求1所述的方法，其特征在于，获取所述更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据所述网络字体文件，加载所述网页的网络字体包括：

获取所述网络字体文件中的网络字体名称；

根据所述网络字体名称对应的路径，加载所述网页的网络字体。

8.一种网络字体加载系统，其特征在于，包括：

前端设备，用于获取当前网页的静态文本内容中的第一文本字符，并存储至前端字符缓存库中；检测所述当前网页中更新的动态文本内容的第二文本字符，在所述前端字符缓存库中查询所述第二文本字符，将未在所述前端字符缓存库查询到的文本字符加入到所述前端字符缓存库中，得到更新后的前端字符缓存库；获取所述更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据所述网络字体文件，加载所述网页的网络字体，其中，所述网络字体文件至少包括：网络字体名称和访问所述网络字体的路径；

后台服务器，用于接收所述更新后的前端字符缓存库中的文本字符，并根据所述文本字符生成相应的网络字体文件。

9.一种网络字体加载装置，其特征在于，包括：

第一获取模块，用于获取当前网页的静态文本内容的中第一文本字符，并存储至前端字符缓存库中；

检测模块，用于检测所述当前网页中更新的动态文本内容的第二文本字符，在所述前端字符缓存库中查询所述第二文本字符；

更新模块，用于将未在所述前端字符缓存库查询到的文本字符加入到所述前端字符缓存库中，得到更新后的前端字符缓存库；

第一处理模块，用于获取所述更新后的前端字符缓存库中的文本字符所对应的网络字体文件，并根据所述网络字体文件，加载所述网页的网络字体，其中，所述网络字体文件至少包括：网络字体名称和访问所述网络字体的路径。

10.根据权利要求9所述的装置，其特征在于，所述第一获取模块包括：扫描模块，用于扫描所述网页中HTML DOM元素的各个TextNode节点内容来获取所述第一文本字符。