Font file loading method and device, electronic equipment and storage medium

Abstract

The invention relates to the technical field of computers, and discloses a font file loading method and device, electronic equipment and a storage medium. According to the method, a static subset font file is generated based on a static text by obtaining the static text and total font file information of a target webpage, and the static subset font file is loaded in the initialization stage of a browser; based on the full font file information, the full font file is loaded in the operation stage of the browser, a dynamic text of a target webpage is periodically obtained, the operation stage is after the initialization stage, if it is judged that loading of the full font file is not completed, a dynamic subset font file is generated and loaded according to the dynamic text and the static text, and the dynamic subset font file is loaded according to the dynamic subset font file. Until the full-quantity font file is loaded; by means of the method, the page fonts can be normally displayed in the loading and running processes of the target webpage, the page font display performance and effect can be improved, and then the use experience feeling of a user is improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a font file loading method, device, electronic device and storage medium. Background Art

[0002] As a rapid application development tool, low-code platforms usually integrate rich user interface design functions, including providing a variety of font options for users to customize text styles. These font files tend to have high details and complexity to meet different design styles and aesthetic needs, but correspondingly, they are generally large in size. In actual applications, when web pages need to load and apply these fonts, due to the large file size, the loading time is often long.

[0003] The traditional font loading mechanism follows the principle of synchronous loading, that is, the page will wait for all specified font files to be fully loaded before rendering the text. Although this loading method ensures the consistency and accuracy of font application, it will inevitably cause the text area on the web page to appear blank or flicker for a period of time before the font loading is completed, which seriously affects the page loading speed and the user's visual experience. Especially in the case of poor network conditions or limited user device performance, this problem is particularly prominent, which not only prolongs the user's waiting time, but also may reduce the user's evaluation of the overall performance and usability of the platform. Obviously, there is an urgent need for a font file loading method to solve at least one of the above problems.

[0004] It should be noted that the above content only provides background technical information related to the present application and does not necessarily constitute prior art. Summary of the invention

[0005] In view of the shortcomings of the prior art described above, the present application provides a font file loading method, device, electronic device and storage medium, so that the target web page can display the page font normally during the loading and running process, and can improve the performance and effect of the page font display, thereby improving the user experience.

[0006] Other features and advantages of the present application will become apparent from the following detailed description, or may be learned in part by the practice of the present application.

[0007] According to one aspect of an embodiment of the present application, a font file loading method is provided, including: obtaining static text and full font file information of a target web page; generating a static subset font file based on the static text, and loading the static subset font file during the initialization phase of the browser; loading the full font file during the running phase of the browser based on the full font file information, and periodically obtaining dynamic text of the target web page, the running phase being after the initialization phase; if it is determined that the loading of the full font file is not complete, generating and loading a dynamic subset font file based on the dynamic text and the static text until the loading of the full font file is complete.

[0008] In one embodiment of the present application, based on the aforementioned scheme, a static subset font file is generated based on the static text, including: deduplicating the static text to obtain deduplicated static text; determining the full font file based on the full font file information, and cropping the deduplicated static text from the full font file to obtain the static subset font file.

[0009] In one embodiment of the present application, based on the aforementioned scheme, after generating a static subset font file based on the static text, the method further includes: after uploading the static subset font file to a preset location, obtaining a static subset font access address of the static subset font file; combining the static subset font access address with the page identifier of the target web page, and storing them in a preset storage location.

[0010] In one embodiment of the present application, based on the aforementioned scheme, a dynamic subset font file is generated and loaded according to the dynamic text and the static text, including: deduplicating the dynamic text to obtain deduplicated dynamic text; determining the static subset font access address according to the page identifier of the target web page; determining the deduplicated static text from the static subset font file based on the static subset font access address; cropping the deduplicated dynamic text and the deduplicated static text from the full font file to obtain the dynamic subset font file; loading the dynamic subset font file until the full font file is loaded.

[0011] In one embodiment of the present application, based on the aforementioned scheme, before obtaining the static text and full font file information of the target web page, the method also includes: obtaining page configuration information of the target web page; extracting the static text based on the page configuration information, and determining the full font file information based on the page configuration information.

[0012] In one embodiment of the present application, based on the aforementioned scheme, the method further includes: after the static subset font file is loaded, displaying the static text in the target web page based on the static subset font file; if it is determined that the loading of the full font file is not complete and the loading of the dynamic subset font file is complete, displaying the static text and dynamic text in the target web page based on the dynamic subset font file.

[0013] In one embodiment of the present application, based on the aforementioned scheme, after the full font file is loaded during the running phase of the browser based on the full font file information, the method further includes: if it is determined that the loading of the full font file is complete, there is no need to load the dynamic subset font file, and all text in the target web page is displayed based on the full font file.

[0014] According to one aspect of an embodiment of the present application, a font file loading device is provided, including: an acquisition module, used to acquire static text and full font file information of a target web page; a first loading module, used to generate a static subset font file based on the static text, and load the static subset font file during the initialization phase of the browser; a second loading module, used to load the full font file during the running phase of the browser based on the full font file information, and periodically acquire dynamic text of the target web page, the running phase being after the initialization phase; a third loading module, used to generate and load a dynamic subset font file according to the dynamic text and the static text, if it is determined that the loading of the full font file is not complete, until the loading of the full font file is complete.

[0015] According to one aspect of an embodiment of the present application, an electronic device is provided, comprising: one or more processors; a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the electronic device implements the font file loading method as described in any one of the above embodiments.

[0016] The present application also provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor of a computer, the computer is enabled to execute the font file loading method as described in any one of the above embodiments.

[0017] Beneficial effects of the present application: The present application obtains the static text and full font file information of the target web page, generates a static subset font file based on the static text, loads the static subset font file in the initialization phase of the browser, loads the full font file in the running phase of the browser based on the full font file information, and periodically obtains the dynamic text of the target web page. The running phase is after the initialization phase. If it is determined that the loading of the full font file is not complete, a dynamic subset font file is generated and loaded according to the dynamic text and the static text until the loading of the full font file is complete; by loading and running different font files at different phases, the target web page can display the correct page font normally during the loading and running processes, reducing performance issues caused by font loading delays, and improving the effect of page font display, thereby improving user experience.

[0018] It should be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The drawings herein are incorporated into the specification and constitute a part of the specification, showing embodiments consistent with the present application, and together with the specification, are used to explain the principles of the present application. Obviously, the drawings described below are only some embodiments of the present application, and for those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative work. In the drawings:

[0020] Figure 1 is a schematic diagram of an exemplary system architecture shown in an exemplary embodiment of the present application;

[0021] Figure 2 is a flowchart of a font file loading method shown in an exemplary embodiment of the present application;

[0022] Figure 3 It is a schematic diagram of the module architecture and overall flow of a font file loading method shown in an exemplary embodiment of the present application;

[0023] Figure 4 is a flowchart of a font file loading method shown in another exemplary embodiment of the present application;

[0024] Figure 5 is a block diagram of a font file loading device shown in an exemplary embodiment of the present application;

[0025] Figure 6 A schematic diagram of the structure of a computer system suitable for implementing an electronic device of an embodiment of the present application is shown. DETAILED DESCRIPTION

[0026] The following will describe the implementation methods of the present application with reference to the accompanying drawings and preferred embodiments. Those skilled in the art can easily understand other advantages and effects of the present application from the contents disclosed in this specification. The present application can also be implemented or applied through other different specific implementation methods, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present application. It should be understood that the preferred embodiments are only for illustrating the present application, not for limiting the scope of protection of the present application.

[0027] It should be noted that the illustrations provided in the following embodiments are only used to illustrate the basic concept of the present application in a schematic manner, and therefore the illustrations only show components related to the present application rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0028] In the following description, a large number of details are discussed to provide a more thorough explanation of the embodiments of the present application. However, it is obvious to those skilled in the art that the embodiments of the present application can be implemented without these specific details. In other embodiments, well-known structures and devices are shown in the form of block diagrams rather than in detail to avoid making the embodiments of the present application difficult to understand.

[0029] First of all, it should be noted that font cropping tools are important software tools for reducing font file size and optimizing font resources. These tools can usually crop font files according to the character set specified by the user, remove unnecessary characters, and effectively reduce the size of font files and improve the loading speed and performance of websites or applications.

[0030] Fontmin is a tool for font cutting, which is used to check the missing characters in the font and help users cut out the font containing only the required characters. For example, Fontmin can compare the characters in the text file with the characters in the font to find the missing characters and cut them out.

[0031] A hash table is a data structure based on key-value pairs. It uses a hash function to map data to specific locations in the table, thereby achieving fast search, insertion, and deletion operations. In the deduplication scenario, the hash table stores data values ​​as keys. If the same key is found, it means that the data is duplicated.

[0032] The basic principle of hash table deduplication: The hash table maps data to buckets in the table through a hash function. Each bucket stores multiple key-value pairs, and the position of the key-value pair in the bucket is determined by the hash code. When new data is inserted, the hash table calculates the hash value of the data and stores it in the corresponding bucket. If the same key is found, it means that the data is duplicated, thus achieving deduplication.

[0033] API (Application Programming Interface) is a set of predefined functions that aims to provide applications and developers with the ability to access a set of routines based on certain software or hardware without having to access the source code or understand the details of the internal working mechanism.

[0034] fetch is a built-in method in JavaScript that is used to send network requests. It returns a Promise object and uses the .then() and .catch() methods to handle the success and failure of the request. Since the fetch method is asynchronous, it does not block the execution of the code. You can continue to execute other code after the request is sent, and process the result through the callback function when the request is completed.

[0035] Figure 1 It is a schematic diagram of an exemplary system architecture shown in an exemplary embodiment of the present application.

[0036] Reference Figure 1 As shown, the system architecture may include a data acquisition device 101 and a computer device 102. Among them, the computer device 102 may be at least one of a desktop graphics processing unit (Graphic Processing Unit, GPU) computer, a GPU computing cluster, a neural network computer, etc. The data acquisition device 101 is used to collect the static text and full font file information of the target web page. In this embodiment, the data acquisition device 101 obtains the above data and provides it to the computer device 102 for processing. Relevant technicians can use the computer device 102 to generate a static subset font file based on the static text, load the static subset font file in the initialization phase of the browser, load the full font file in the running phase of the browser based on the full font file information, and periodically obtain the dynamic text of the target web page. After the initialization phase, if it is determined that the full font file loading is not completed, the dynamic subset font file is generated and loaded according to the dynamic text and the static text until the full font file loading is completed to complete the font file loading of the target web page. It should be noted that the data acquisition device 101 and the computer device 102 provided in this embodiment are only an example, and should not bring any restrictions to the functions and scope of use of the embodiments of the present application.

[0037] It should be noted that the font file loading method provided in the embodiment of the present application is generally executed by the computer device 102 , and accordingly, the font file loading device is generally disposed in the computer device 102 .

[0038] Figure 2is a flowchart of a font file loading method shown in an exemplary embodiment of the present application. The font file loading method can be executed by a computing and processing device. The computing and processing device can be Figure 1 The computer device 102 shown in FIG. Figure 2 As shown, the font file loading method at least includes steps S210 to S240, which are described in detail as follows:

[0039] In step S210, the static text and full font file information of the target web page are obtained.

[0040] In one embodiment of the present application, the process before obtaining the static text and full font file information of the target web page also includes the following steps: obtaining the page configuration information of the target web page; extracting the static text based on the page configuration information, and determining the full font file information based on the page configuration information.

[0041] In this embodiment, the present application can be applied to a low-code platform. A low-code platform implemented based on any technology stack can realize visual layout of the page through drag-and-drop operation when editing the page of the target website, and store the page configuration information including font configuration information in a relational database after layout.

[0042] In some embodiments, based on the graph editing engine (such as Antv-X6, etc.), the page editing of the data-driven low-code platform can be realized, and the visual layout and configuration of the page can be realized through drag-and-drop operation in the web interface, that is, the web page interface. The page can select various functional components as needed to freely combine and arrange, and the font family, font size, text color and other CSS (Cascading Style Sheets) styles used can be set in each functional area of ​​the page. At the same time, it also has the ability to automatically beautify the layout, reposition, and scale the canvas. After the editing is completed, the page function and style are converted into structured configuration information and stored in a relational database, and the page configuration information including the font configuration information is stored in a relational database, such as a MySQL database. Among them, the basic configuration items of each type of component are as follows: the text that the component needs to display, the data source interface information displayed by the component, the font used when the component displays the text, and the logical pixel size, style, and boldness of the font. These page configurations and component configurations are generated by Antv-X6 into a JSON format data structure for persistent storage in the relational database MySQL.

[0043] In this embodiment, the static text used is extracted from the page configuration information based on a regular expression, and the full font file information is determined by analyzing the page configuration information in the source code of the target web page, so as to determine the full font file through the full font file information. In one embodiment, a list of Chinese characters used by the page, i.e., static text, is extracted from the configuration information through a regular expression. Among them, a full font file is a font file containing all texts; a static font file is a font file that only contains texts used when editing a page (referred to as static text); a dynamic font file is a font file that contains texts returned by a data interface (referred to as dynamic text) and static texts.

[0044] In step S220, a static subset font file is generated based on the static text, and the static subset font file is loaded during the initialization phase of the browser.

[0045] In one embodiment of the present application, the process of generating a static subset font file based on static text includes the following steps: deduplicating the static text to obtain deduplicated static text; determining the full font file based on the full font file information, and cropping the deduplicated static text from the full font file to obtain a static subset font file.

[0046] In this embodiment, a static subset font file is generated based on fontmin and other font clipping tools, and the text and file are persistently stored. The specific process can be: after the static text is deduplicated through a hash table, the deduplicated static text is obtained, and the open source font clipping tool fontmin is used to clip the full font package of the font to generate a static subset font file containing only the deduplicated static text.

[0047] In one embodiment of the present application, the process after generating a static subset font file based on static text also includes the following steps: after uploading the static subset font file to a preset location, obtaining the static subset font access address of the static subset font file; combining the static subset font access address and the page identifier of the target web page, and storing them in a preset storage location.

[0048] In this embodiment, the static subset font file is uploaded to a preset location, such as Alibaba Cloud OSS (Object Storage Service), and then the access address of the file is obtained. The access address and static text are combined with the page unique identifier pageID, i.e., the page identifier, and stored in a relational database, such as MySQL.

[0049] In one embodiment of the present application, a static subset font file is loaded in the initialization phase of the browser, and after loading is completed, static text in the target web page is displayed based on the static subset font file. The initialization phase is a life cycle of the browser itself.

[0050] In this embodiment, the page font configuration information is traversed, the static subset font file is asynchronously loaded through fetch, and in the then callback function after the loading is completed, the css font-face is used to declare the static subset font file using the font.

[0051] In one embodiment of the present application, during the initialization phase, a variable is set to record whether the full font files of all fonts of the page have been loaded, and the initial value is false, which indicates that the full font loading stage is currently in progress; promise.all is used to load the full font files of all fonts used by the page through fetch, and the recorded variable is set to true in its then callback function, which indicates that the full font loading stage has been completed and enters the full font loading completion stage. Three types of font files of the same font are loaded and used in three different periods. The three periods are: initialization phase, full font loading phase, and full font loading completion phase; the corresponding three types are: static subset font file, dynamic subset font (streaming) file, and full font file.

[0052] In this embodiment, taking the variable isAllFontLoaded as an example, isAllFontLoaded is set to false to mark the entry into the full font loading state, and Promise.all is used in combination with fetch to load the full font. In the then callback function after the loading is completed, isAllFontLoaded is set to true to mark the entry into the full font loading completion state.

[0053] In step S230, the full font file is loaded in the running stage of the browser based on the full font file information, and the dynamic text of the target web page is periodically obtained.

[0054] In one embodiment of the present application, in the full font loading stage, a timer is set up using setInterval, and the dynamic data returned by the page data interface is submitted to the dynamic subset generation module at regular intervals to obtain the dynamic subset font streaming file and declare the use of the streaming file through the css font-face until the full font loading is completed. Among them, the running stage is after the initialization stage, and the running stage includes the full font loading stage and the full font loading completion stage. setInterval is a function that implements timed calls, which can call functions or calculate expressions according to a specified period (in milliseconds). The setInterval method will call the function continuously until clearInterval is called or the window is closed.

[0055] In this embodiment, a timer is set up using setInterval during the full font loading stage. Assume that the timer is set to judge the value of the variable isAllFontLoaded every 3 seconds. If isAllFontLoaded is false, all dynamic data returned by the page data interface are submitted to the dynamic subset generation module to obtain the dynamic subset font streaming file and declare the use of the streaming file through the font-face of the css; if isAllFontLoaded is true, the timer is turned off and the logic of the full font loading completion stage is executed.

[0056] In step S240, if it is determined that the loading of the full font file is not complete, a dynamic subset font file is generated and loaded according to the dynamic text and the static text until the loading of the full font file is complete.

[0057] In one embodiment of the present application, the process of generating and loading a dynamic subset font file based on dynamic text and static text includes the following steps: deduplicating the dynamic text to obtain deduplicated dynamic text; determining the static subset font access address based on the page identifier of the target web page; determining the deduplicated static text from the static subset font file based on the static subset font access address; cropping the deduplicated dynamic text and the deduplicated static text from the full font file to obtain a dynamic subset font file; loading the dynamic subset font file until the full font file is loaded.

[0058] In one embodiment of the present application, dynamic text is extracted based on the acquired dynamic data, and then combined with the static text used in the page to generate a streaming file of the dynamic subset font, that is, a dynamic subset font file.

[0059] In this embodiment, the open source Express framework is used to provide an API interface for passing in dynamic text and returning a streaming file of a dynamic subset font. Regular expressions are used to extract dynamic text and obtain static text from the relational database MySQL. The two are combined and the open source fontmin is used to generate a dynamic subset font file.

[0060] In this embodiment, the dynamic data content and the page unique identifier pageID are received as parameters, and the generated dynamic subset font file is returned as the value. The Chinese character list used is extracted from the dynamic data content by regular expression, and the deduplicated dynamic text is obtained after deduplication through the hash table, and the deduplicated static text is obtained from the relational database MySQL according to the page unique identifier pageID. Combined with the deduplicated dynamic text and the deduplicated static text, the dynamic subset font file is generated using the open source font clipping tool fontmin.

[0061] In one embodiment of the present application, after the static subset font file is loaded, the static text in the target web page is displayed based on the static subset font file; if it is determined that the loading of the full font file is not complete and the dynamic subset font file is loaded, the static text and dynamic text in the target web page are displayed based on the dynamic subset font file.

[0062] In this embodiment, during the page initialization phase, a font information list including the full font access address and the static subset font access address of the font used in this page is obtained according to the pageID; the variable isAllFontLoaded is declared and initialized to false, indicating that the full subset loading phase has begun, and Promise.all is used in combination with fetch to request the full font access address to load all full fonts at once, and isAllFontLoaded is set to true in the then callback function after the loading is completed, indicating that the full subset loading is completed; the font information list is traversed and the static subset font access address is requested using fetch to load all static subset fonts separately, and the static subset fonts are declared to be used using the css font-face in the then callback function after the loading is completed. The static subset fonts are loaded separately in order to display the fonts used by the page as soon as possible. In the full font loading stage, record the dynamic data content obtained from the interface, use setInterval to set a timer, and judge isAllFontLoaded every 3 seconds. If it is false, it is still in the full font loading stage. At this time, it is necessary to submit the recorded dynamic data content to the dynamic subset generation module to obtain the dynamic subset font streaming file and use the css font-face to declare the use; if it is true, it means that the logic of the full font loading completion stage should be executed. At this time, the timer should be cleared to reduce memory overhead. In the full font loading completion stage, that is, in the then callback function of Promise.all, use css font-face to declare the use of the full font file.

[0063] In one embodiment of the present application, the process after loading the full font file based on the full font file information during the running stage of the browser also includes the following steps: if it is determined that the loading of the full font file is complete, there is no need to load the dynamic subset font file, and all text in the target web page is displayed based on the full font file.

[0064] In one embodiment of the present application, referring to Figure 3 As shown, Figure 3The module architecture and overall flow diagram of the font file loading method shown in an exemplary embodiment of the present application. The present application also provides a font file loading system, including an editing module, a static subset generation module, a display module and a dynamic subset generation module. The editing module is a low-code platform implemented based on any technology stack. When editing a page, it realizes visual layout of the page through drag-and-drop operations and generates corresponding page configuration information. After layout, the page configuration information including font configuration information is stored in a relational database; the static subset generation module extracts the static text used from the page configuration information based on regular expressions, generates a static subset font file based on fontmin and other font clipping tools, and stores it in the OSS service, and stores the OSS access link and static text of the file together in a relational database; the display module obtains or applies configuration information, determines the font that needs to be loaded or applied by determining the period in which the browser is located, and loads different types of font files of the same font at different periods; the display module can also obtain interface information, that is, dynamic data; the dynamic subset generation module extracts dynamic text based on the dynamic data submitted by the display module, and then generates a dynamic subset font streaming file in combination with the static text used by the page, and responds to the display module to output the dynamic subset font streaming file to the display module. Among them, the display module uses fetch to obtain the page configuration information and font information from the interface; and implements the parsing and rendering of the page configuration information based on Antv-X6.

[0065] In one embodiment of the present application, the font file loading method includes at least the following steps: a page editing process, a data-driven low-code page editing engine is implemented based on Antv-X6, and the visual layout of the page is realized through drag-and-drop operation. After the layout, the page function and style are converted into structured configuration information and stored in a relational database; a static subset generation process, extracting the static text used by the page from the configuration information through regular expressions, and generating a static subset font file based on fontmin, and persistently storing the text and file; a page display process, which requires loading three types of font files of the same font in three different periods; the three periods are: initialization phase, full font loading phase, and full font loading completion phase; the corresponding three font file types are: static subset font file, dynamic subset font streaming file, and full font file; a dynamic subset generation process, extracting dynamic text from the parameters requested by the interface, combining the static text stored when editing the page, generating a streaming dynamic subset font file, and returning it to the interface without saving it separately. The corresponding specific implementation process has been described in detail in the above embodiment, and will not be repeated here.

[0066] Figure 4FIG. 1 is a flowchart of a font file loading method according to another exemplary embodiment of the present application. Figure 4 As shown, after entering the target web page, the page configuration information including the page font information is obtained, the static text is extracted based on the page configuration information, and the full font file information is determined based on the page configuration information; a static subset font file is generated based on the static text, and the static subset font file is loaded and applied during the initialization phase of the browser; after the static subset font file is loaded, the full font file is loaded and the dynamic text is obtained by requesting the data interface; if it is determined that the loading of the full font file is complete, the full font file is directly applied; if it is determined that the loading of the full font file is not complete, the dynamic texts responded by multiple data interfaces are integrated, and the request generation interface is used to generate a dynamic subset font file based on the dynamic text and the static text, and the dynamic subset font file is loaded and applied until it is determined that the loading of the full font file is complete.

[0067] In order to solve the performance problem of loading font files on web pages of low-code platforms, this application uses fontmin to cut the full font file into two types of files: static subset font file and dynamic subset font file, and loads and uses three different font files of the same font in three different stages of displaying the page, so as to achieve high performance effect of displaying page fonts normally throughout the entire page loading and rendering process.

[0068] This application loads smaller static subset font files during initialization, which can display the correct web page content and style more quickly; this application uses fetch to asynchronously load three types of font files without blocking the page rendering process; this application dynamically generates and applies dynamic subset font files, so that the text returned by the interface can also correctly use the corresponding font style, and the dynamic subset font files dynamically generated by this application are streaming and disposable, which reduces the use of storage space while ensuring functionality; this application no longer generates dynamic subsets after obtaining the full font files, which can not only allow the dynamic text returned by the interface to use the correct font, but also save server resource overhead; in the entire process of this application, whether it is static text or dynamic text returned by the interface, the correct font can be used throughout the process.

[0069] Figure 5 is a block diagram of a font file loading device shown in an exemplary embodiment of the present application. The device can be applied to Figure 1 The implementation environment shown in the figure is specifically configured in the computer device 102. The device can also be applied to other exemplary implementation environments and specifically configured in other devices. This embodiment does not limit the implementation environment to which the device is applied.

[0070] like Figure 5As shown, the exemplary font file loading device includes: an acquisition module 510 , a first loading module 520 , a second loading module 530 and a third loading module 540 .

[0071] Among them, the acquisition module 510 is used to obtain the static text and full font file information of the target web page; the first loading module 520 is used to generate a static subset font file based on the static text, and load the static subset font file during the initialization phase of the browser; the second loading module 530 is used to load the full font file during the running phase of the browser based on the full font file information, and periodically obtain the dynamic text of the target web page, and the running phase is after the initialization phase; the third loading module 540 is used to generate and load the dynamic subset font file according to the dynamic text and the static text if it is determined that the loading of the full font file is not complete, until the loading of the full font file is complete.

[0072] It should be noted that the font file loading device provided in the above embodiment and the font file loading method provided in the above embodiment belong to the same concept, wherein the specific manner in which each module and unit performs the operation has been described in detail in the method embodiment, and will not be repeated here. In actual application, the font file loading device provided in the above embodiment can distribute the above functions to different functional modules as needed, that is, divide the internal structure of the device into different functional modules to complete all or part of the functions described above, and this is not limited here.

[0073] An embodiment of the present application also provides an electronic device, including: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by one or more processors, the electronic device implements the font file loading method provided in the above-mentioned embodiments.

[0074] Figure 6 The structure diagram of the computer system suitable for implementing the electronic device of the embodiment of the present application is shown. It should be noted that: Figure 6 The computer system 600 of the electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0075] like Figure 6As shown, the computer system 600 includes a central processing unit (CPU) 601, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 602 or the program loaded from the storage part 608 to the random access memory (RAM) 603, such as executing the methods provided in the above-mentioned various embodiments. In the RAM 603, various programs and data required for system operation are also stored. The CPU 601, the ROM 602 and the RAM 603 are connected to each other through the bus 604. The input / output (I / O) interface 605 is also connected to the bus 604.

[0076] The following components are connected to the I / O interface 605: an input section 606 including a keyboard, a mouse, etc.; an output section 607 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 608 including a hard disk, etc.; and a communication section 609 including a network interface card such as a LAN (Local Area Network) card, a modem, etc. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to the I / O interface 605 as needed. A removable medium 611, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 610 as needed so that a computer program read therefrom is installed into the storage section 608 as needed.

[0077] In particular, according to an embodiment of the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present application includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a computer program for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication section 609, and / or installed from a removable medium 611. When the computer program is executed by a central processing unit (CPU) 601, various functions defined in the system of the present application are executed.

[0078] It should be noted that the computer-readable medium shown in the embodiment of the present application can be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium can be, for example, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media can include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM), a flash memory, an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present application, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, wherein a computer-readable computer program is carried. This propagated data signal can take a variety of forms, including but not limited to an electromagnetic signal, an optical signal, or any suitable combination of the above. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. A computer program contained on a computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wired, etc., or any suitable combination of the above.

[0079] The flowchart and block diagram in the accompanying drawings illustrate the possible architecture, functions and operations of the system, method and computer program product according to various embodiments of the present application. Wherein, each box in the flowchart or block diagram can represent a module, a program segment, or a part of the code, and the above-mentioned module, program segment, or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0080] The units involved in the embodiments described in this application may be implemented by software or hardware, and the units described may also be set in a processor. The names of these units do not, in some cases, constitute limitations on the units themselves.

[0081] Another aspect of the present application further provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor of a computer, causes the computer to execute the font file loading method provided in the above-mentioned embodiments. The computer-readable storage medium may be included in the electronic device described in the above-mentioned embodiments, or may exist independently without being assembled into the electronic device.

[0082] It should be noted that, although several modules or units of the equipment for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to the embodiments of the present application, the features and functions of two or more modules or units described above can be embodied in one module or unit. On the contrary, the features and functions of one module or unit described above can be further divided into being embodied by multiple modules or units.

[0083] Another aspect of the present application also provides a computer program product or a computer program, which includes a computer instruction stored in a computer-readable storage medium. A processor of a computer device reads the computer instruction from the computer-readable storage medium, and the processor executes the computer instruction, so that the computer device executes the font file loading method provided in each of the above embodiments.

[0084] Through the description of the above implementation methods, it is easy for those skilled in the art to understand that the example implementation methods described here can be implemented by software or by combining software with necessary hardware. Therefore, the technical solution according to the implementation methods of the present application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a touch terminal, or a network device, etc.) to execute the method according to the implementation methods of the present application.

[0085] Those skilled in the art will readily appreciate other embodiments of the present application after considering the specification and practicing the embodiments disclosed herein. The present application is intended to cover any variations, uses or adaptations of the present application, which follow the general principles of the present application and include common knowledge or customary technical means in the art that are not disclosed in the present application.

[0086] The above embodiments are merely illustrative of the principles and effects of the present application, and are not intended to limit the present application. Anyone familiar with the technology may modify or change the above embodiments without violating the spirit and scope of the present application. Therefore, all equivalent modifications or changes made by a person of ordinary skill in the art without departing from the spirit and technical ideas disclosed in the present application shall still be covered by the claims of the present application.

Claims

1. A font file loading method, characterized in that: include: Get the static text and full font file information of the target web page; Generating a static subset font file based on the static text, and loading the static subset font file during the initialization phase of the browser; Based on the full font file information, the full font file is loaded in the running phase of the browser, and the dynamic text of the target webpage is periodically obtained, wherein the running phase is after the initialization phase; If it is determined that the loading of the full font file is not complete, a dynamic subset font file is generated and loaded according to the dynamic text and the static text until the loading of the full font file is complete.

2. The font file loading method according to claim 1, characterized in that: Generating a static subset font file based on the static text includes: Deduplication processing is performed on the static text to obtain deduplication static text; The full font file is determined according to the full font file information, and the static subset font file is obtained by cutting the full font file based on the deduplicated static text.

3. The font file loading method according to claim 1, characterized in that: After generating a static subset font file based on the static text, the method further includes: After uploading the static subset font file to a preset location, obtaining a static subset font access address of the static subset font file; The static subset font access address and the page identifier of the target web page are combined and stored in a preset storage location.

4. The font file loading method according to claim 3, characterized in that: Generating and loading a dynamic subset font file according to the dynamic text and the static text, including: Deduplication processing is performed on the dynamic text to obtain a dynamic text after deduplication; Determining the static subset font access address according to the page identifier of the target web page; Determining the deduplicated static text from the static subset font file based on the static subset font access address; The dynamic subset font file is obtained by cutting the deduplicated dynamic text and the deduplicated static text from the full font file; The dynamic subset font file is loaded until the full font file is loaded.

5. The font file loading method according to any one of claims 1 to 4, characterized in that: Before obtaining the static text and full font file information of the target webpage, the method further includes: Obtaining page configuration information of the target web page; The static text is extracted based on the page configuration information, and the full font file information is determined based on the page configuration information.

6. The font file loading method according to any one of claims 1 to 4, characterized in that: The method further comprises: After the static subset font file is loaded, displaying the static text in the target web page based on the static subset font file; If it is determined that the loading of the full font file is not complete, and the loading of the dynamic subset font file is complete, the static text and the dynamic text in the target web page are displayed based on the dynamic subset font file.

7. The font file loading method according to any one of claims 1 to 4, characterized in that: After the full font file is loaded during the running phase of the browser based on the full font file information, the method further includes: If it is determined that the loading of the full font file is complete, there is no need to load the dynamic subset font file, and all texts in the target web page are displayed based on the full font file.

8. A font file loading device, characterized in that: include: The acquisition module is used to obtain the static text and full font file information of the target web page; A first loading module, used for generating a static subset font file based on the static text, and loading the static subset font file in the initialization phase of the browser; A second loading module, configured to load the full font file based on the full font file information during the running phase of the browser and periodically obtain the dynamic text of the target web page, wherein the running phase is after the initialization phase; The third loading module is used to generate and load a dynamic subset font file according to the dynamic text and the static text if it is determined that the loading of the full font file is not complete, until the loading of the full font file is complete.

9. An electronic device, characterized in that: The electronic device comprises: one or more processors; The storage device is used to store one or more programs, and when the one or more programs are executed by the one or more processors, the electronic device implements the font file loading method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed by a processor of a computer, the computer is caused to execute the font file loading method according to any one of claims 1 to 7.

Images