TW201837738A - Method of displaying font when changing the content of web page - Google Patents

Abstract

A method of displaying font when changing the content of a web page includes the following steps. First, a page information including a first code information and a first font information is downloaded to a browsing end. A font-display program of the browsing end downloads a first font subset from a font server. When the web page content is changed on the browser side to generate a second code information and a font image of the second code information which is not appeared in the first font subset and the second code information is corresponding to the second font information. The browsing end sends a web page address, the second code information, and the second font information to the font server. The font generation module generates a corresponding second font subset. The second second font subset is downloaded and the browsing end presents the second code information and the second font information on the web page according to the second font subset.

Description

Method of displaying fonts when the content of a web page is changed

The present invention relates to a method for displaying a font when a content of a web page is changed, and more particularly to a method for displaying a font on a web page for an Asian font.

With the continuous advancement of information technology, people's lives can be said to be inseparable from the Internet. Compared to the early days of the development of the World Wide Web, the content presented on the current web page can be said to be more and more abundant. For example, most of the fonts displayed on web pages in the early browsers are defined by the HyperText Markup Language (HTML), but as the content of the webpage becomes more diverse and richer, Under the existing business, users have begun to provide services for downloading different font files through the Internet according to the needs of webpages. In this way, even if the style of the font is not installed on the browser side, the user can enjoy a variety of fonts while browsing the webpage. However, Asian text fonts are usually large and take more time to download, increasing the user's waiting time. Taiwan Patent I427534 The method disclosed in the method for generating a web totem by a totem server is that after the totem display program communicates with the totem server, the sub-set font is obtained by using the font and font information of the web page to reduce the font size. The file achieves the purpose of speeding up the download and rendering. Although the method downloads faster than the entire font file, there is still waiting time for communication with the totem server. It takes about several seconds depending on the network quality and bandwidth, and there are several seconds in the middle of the waiting time to display the system default font. After the sub-set font file is completely downloaded, the set font style can be displayed correctly. Therefore, the patentee of the patent later proposes a method for accelerating the display of the Asian language font on the webpage in the patent application 105115119, so that the viewer can omit the waiting time in the middle and can directly browse to the font style set by the webpage. However, some web pages update the data as soon as the user pulls down, or some web pages interact with the user to generate new content. However, in the patent application 105115119, the situation in which the content of the webpage is updated in real time is not considered, and the content generated by the instant update of the webpage cannot be supported. In other words, the content generated by the instant update of the webpage cannot enjoy a variety of fonts.

In order to solve the above problems, an object of the present invention is to provide a method for displaying a font when a content of a web page is changed, so that a content generated by an instant update of the web page can enjoy a variety of fonts. Based on the above objects and other objects, the present invention provides a method of displaying a font when content of a web page is changed, including the following steps. First, downloading at least one webpage information from a webpage source corresponding to a webpage URL to a browser end, the webpage information includes a connection information, at least a first wordcode information, and a first font type information, the first character code The information corresponds to the first type of information. The browser side downloads a font display program from the font server according to the connection information, and then the font display program to the font server downloads a first sub-set font file, and the browser end is based on the first sub-set font type. The file displays a web page. The at least one second word code information is generated by updating the content of the webpage on the browser side, and the font image corresponding to the second word code information does not appear in the first sub-set font file, and the second word code information is corresponding to A second type of information. Then, re-analyze all the webpage information. Then, the browser transmits the webpage URL, the first code information, the second code information, the first font information, and the second font information to the font server. The font generation module generates at least one corresponding second subset font file according to the webpage URL, the first character code information, the second character code information, the first font information, and the second font information. Next, download the second sub-set font file to the browser. Then, the browser side presents the first word code information, the second word code information, the first font information, and the second font information to the webpage according to at least the second subset font file. Based on the above and other objects, the present invention further provides a method for displaying a font when a content of a web page is changed, including the following steps. First, downloading at least one webpage information from a webpage source corresponding to a webpage URL to a browser end, the webpage information includes a connection information, at least a first wordcode information, and a first font type information, the first character code The information corresponds to the first type of information. The browser side downloads a font display program from the font server according to the connection information, and then the font display program to the font server downloads a first sub-set font file, and the browser end is based on the first sub-set font type. The file displays a web page. The second word code information is generated by updating the content of the webpage on the browser side, and the font image corresponding to the second word code information does not appear in the first subset font file, and the second word code information corresponds to one Second type information. Then, the font display program analyzes the second word information or the second type information in the webpage information. Then, the browser transmits the webpage URL, the second code information, and the second font information to the font server. The font generation module generates at least one corresponding second subset font file according to the webpage web address, the second character code information, and the second font information. Next, download the second sub-set font file to the browser. Then, the browser side presents the second word information and the second font information to the web page according to at least the second subset font file. In the above method for displaying a font when the content of the webpage is changed, if the second font information is the same as the first font information, the downloaded second sub-set font file will overwrite the first sub-set font file effect. In the above method for displaying a font when the content of the webpage is changed, if the second font information is the same as the first font information, the name of the second font information may be different from the first font on the browser side. The name of the information. Moreover, the name of the second font information is changed to the name of the first font information and transmitted to the font server. In addition, after downloading the second sub-set font file to the browser end, the name of the second font information in the second sub-set font file is changed back to the original name of the second font information.

Please refer to FIG. 1. FIG. 1 is a schematic diagram of an embodiment of a system of the present invention. In this embodiment, the system 100 includes a webpage source 110, a browser end 120, and a font server 130. The webpage source 110, the browser end 120, and the font server 130 are connected by the internet. The network 2 is connected to each other. The web page source 110 is composed of at least one (in this embodiment, a plurality of) servo hosts 112, which may be placed in one place or distributed in multiple places. In addition, the browser terminal 120 is a desktop computer in this embodiment. The desktop computer includes a host 123 and a screen 124. In other embodiments, the browser terminal 120 can also be a notebook computer. A smart phone, a tablet, an All in One computer or other electronic device that can browse the web. In addition, the font server 130 can also be composed of one or more servo hosts, and the font server 130 includes a font generation module 132 and an original font database 134, and the font generation module 132 and the original The detailed operation of the font database 134 can be found in the patent application 105115119. Please refer to FIG. 2A and FIG. 2B simultaneously. FIG. 2A and FIG. 2B are flowcharts showing a first embodiment of a method for displaying a font when the content of a webpage is changed according to the present invention. First, in step S110, the user opens the browser on the browser end 120. In this embodiment, the browser may be Internet Explorer, Firefox, Opera Web Browser, or Google Chrome. Then, step S120 is implemented, and then connected to the webpage source through the hyperlink, so that the screen 124 displays the webpage as shown in FIG. 3A, and the webpage URL shown in FIG. 3A: http://www.abc.com .tw/. It should be noted that the webpage URL and the webpage content shown in FIG. 3A are only schematic and do not represent the real webpage, and the content shown on the webpage is only used for the description of the present application. In addition, as shown in FIG. 4A, the webpage information that is downloaded from the webpage source 110 to the browser terminal 120 includes a connection information, at least a first wordcode information, and a first font type information, wherein the connection information refers to the connection to the word. The URL of the type server 130. In addition, the first character code information is, for example, "How are you?" in the webpage 30 shown in FIG. 3A, and the first font information refers to, for example, the font used by the above-mentioned word code, that is, the first word code information corresponds to The first type of information, for example: noto-1 font. Thereafter, step S130 is implemented. As shown in FIG. 4B, after the browser end 120 is connected to the font server 130 according to the link information, the font display program is downloaded from the font server 130. Then, in step S140, the font display program located at the browser end 120 is based on at least one webpage URL (ie, the webpage URL shown in FIG. 3A: http://www.abc.com.tw/) and at least one A type of information (ie, noto-1 font), and at least one first addressing information is generated. Then, step S150 is implemented. As shown in FIG. 4C, the browser end 120 downloads a first subset font file from the font server 130 according to the first addressing information. In this embodiment, the first sub-set font file preferably includes only font images corresponding to the words shown in the web page 30, rather than all font images (ie, noto-1 fonts). All font images), which increases the speed of downloading. Then, in step S160, the host 123 of the browser end 120 interprets the first subset font file to generate a first interpretation result, and the first interpretation result is presented on the webpage of the browser end 120. In detail, the browser 120 may cause the font (partial or full) of the font on the webpage to present a font corresponding to the first subset font file according to the first subset font file. Then, in step S170, the web page generates new content due to the behavior of the user. For example, certain web pages (eg, web pages that include Javascript code) interact with the user to produce instant content updates. Alternatively, some applications of the browser 120 may generate new content on the webpage after the operation. For example, as shown in FIG. 3A, the original webpage information has the words "How are you?", and the fonts presented therein correspond to the first font information (for example, noto-1 font). Later, as shown in FIG. 3B, the five words "What to eat today" are generated because of the interaction with the user, and the words "What are you eating today" are side by side with the words "How are you?" together. Since the font image corresponding to the words "What to Eat Today" is not included in the first subset font file, the font "What to Eat Today" displayed by the browser 120 is not It is provided by the font server 130, but only the font type preset by the browser terminal 120, which is relatively unattractive, which may affect the user's perception. In Patent Application No. 105115119, such a problem is not solved, but the present embodiment solves the problem through the following process. Please refer to step S180, the font display program re-analyzes all webpage information. In order to perform this step, the designer of the web page can add the relevant code when editing the webpage, and specify the font corresponding to the updated content when the content of the webpage is updated. For example, please refer to FIG. 6A, which is a manner of specifying the font corresponding to the updated content when the content of the webpage is updated by using HTML, or specifying the font of the updated content by means of CSS (as shown in FIG. 6B). . Therefore, when the web page is updated, the browser 120 will re-analyze the information of all the web pages. In this embodiment, for example, the _jf.flush() function is used to re-analyze all the webpages, and the information of all the webpages is analyzed again to capture the word information and the font information in the webpage information. Here, the word information includes the first word information and the second word information, and the font information includes the first font information and the second font information. In this embodiment, the second word code information is the updated content of the webpage, that is, the words "What to eat today". In this embodiment, the second font information is the same as the first font information, that is, the noto-1 font type referred to in FIG. 6A and FIG. 6B. Then, referring to step S190 and FIG. 4D, since the second font information is the same as the first font information, the webpage URL, the first word information plus the second word information, the first font information and The second font information is transmitted to the font server 130. Moreover, in this embodiment, since the second font information is the same as the first font information, the webpage URL, the first wordcode information, the second wordcode information, and the first font information are actually transmitted to the font. Server 130. Next, in step S210, the font generation module in the font server 130 will be based on the accepted message (ie, the webpage URL, the first code information plus the second word information, the first font information or the first Two-character information), and a second sub-set font file is generated. Thereafter, step S220 is implemented. Referring to FIG. 4E at the same time, the font server 130 transmits the second subset font file to the browser terminal 120. Then, in step S230, the host 123 of the browser end 120 interprets the second subset font file and generates a second interpretation result, and presents the second interpretation result on the web page 30. In this way, "How are you" and "What to eat today" that were originally presented on the webpage 30 will present the same font (as shown in Figure 3C). In the above embodiment, "How are you" and "What to eat today" are the same font, that is, the first font information and the second font information are the same. However, those who have the usual knowledge in the field can also set "How are you" and "What to eat today" to different fonts, for example, change the noto-1 font referred to in Fig. 6A and Fig. 6B to noto- 2 font type. In other words, the first font information is different from the second font information. In addition, it should be noted that although in the implementation of step S170, "How are you" has been presented on the screen in the desired font, but when the second font information is the same as the first font information, When step S220 is implemented, the browser terminal 120 will reload the noto-1 font image of "How are you", which causes a waste of network bandwidth. Moreover, the browser side 120 will still process "How are you?", that is, the second sub-set font file will overwrite the first sub-set font file. This will result in: "How are you," although the original font will remain, but it will show a flashing phenomenon on the screen. Please refer to FIG. 5A and FIG. 5B simultaneously. FIG. 5A and FIG. 5B are flowcharts showing a second embodiment of the method for displaying a font on a webpage according to the present invention. The steps S110 to S170 of FIG. 5A and FIG. 5B are the same as those of the first embodiment, and therefore, the same reference numerals are used in the embodiment, and the description thereof will not be repeated. After the webpage 30 is immediately updated by the user interaction, step S380 is executed to analyze the second word information or the second font information generated after the webpage 30 is updated in real time. In order to perform this step, the designer of the web page can add relevant code when editing the webpage, and specify the font corresponding to the updated content when the webpage is updated. For example, please refer to FIG. 6C, which is a way of specifying the font corresponding to the updated content when the webpage is updated by means of CSS. In the present embodiment, for example, the noto-2 font (ie, the second font information) in the processing web page 30 is specified by the _jf.flushfont ("noto-2") function, which is analyzed in the web page 30. Use the word corresponding to the noto-2 font (including the second word information, ie: "What to eat today"), to capture the second font information and the second font information in the webpage information. Word information. Or, for example, use the _jf.flushcss(".hello") function to specify the class="hello" element in the processing web page, and analyze the font used in the class="hello" element (noto-2 font, also Namely: the second type of information) and the second word information (ie: "What to eat today"). Then, referring to step S390 and FIG. 7A, the webpage web address, the second character code information, and the second font information are transmitted to the font server 130. Next, in step S410, the font generation module in the font server 130 generates a second sub-subject based on the accepted message (ie, webpage URL, second-word information, and second font information). Collect font files. Thereafter, step S420 is implemented. Referring to FIG. 7B at the same time, the font server 130 transmits the second subset font file to the browser terminal 120. Then, in step S430, the host 123 of the browser end 120 interprets the second subset font file and generates a second interpretation result, and presents the second interpretation result on the web page 30. In this way, what "what is eaten today" originally presented on the web page 30 will present the desired font (noto-2 font in this embodiment). However, in the second embodiment, if the first font information and the second font information are the same, and the webpage 30 is analyzed by the _jf.flushfont ("noto-1") function, the processing is still performed in step S380. The first font information is analyzed, and the first font information is still transmitted to the font server 130 in step S390. Therefore, in step S430, the browser end 120 will still reload the first font information, and the browser end 120 will still process the "How are you" again, so it will still appear flashing on the screen. In order to solve the problem, if the first font information and the second font information are the same, the browser 120 still reloads the first font information, and the screen displays a flickering phenomenon. In the third embodiment, when the webpage designer edits the webpage, the name of the second font information is different from the name of the first font information, and the name of the second font information is still named as shown in FIG. 6A. It is "noto-2". When the step S390 is executed, the name "noto-2" of the second font information is changed to the name "noto-1" of the first font information, and then transmitted to the font server 130, and the related code is as shown in FIG. 6D. Shown. Since the font server 130 receives the name "noto-1" of the first font information, it will be treated as the first font information, so the second sub-set font file is created. The name of the second font information is still the name of the first font information "noto-1". However, in step S430, the name of the second font information in the second subset font file is changed back to the original name of the second font information, and the associated code is as shown in FIG. 6E. Since the name of the second font information has been changed back to the original name, only "What to eat today" is processed in step S430, "Why are you okay" there will be no relevant changes, so no flicker will occur. phenomenon. Moreover, in this way, after the webpage 30 is updated in real time, even if "How are you" and "What to eat today" have the same font type, there will be no word information and font information related to "How are you?" Repeated transfers and processing occur. The present invention has been described above, but it is not intended to limit the scope of patent rights claimed herein. The scope of patent protection is subject to the scope of the patent application and its equivalent fields. Any changes or modifications made by those skilled in the art without departing from the spirit or scope of this patent are subject to the equivalent changes or designs made in the spirit of the present disclosure and should be included in the scope of the patent application below. Inside.

2‧‧‧Internet

30‧‧‧Webpage

100‧‧‧ system

110‧‧‧Web Source

112‧‧‧Servo host

120‧‧‧Display device for displaying fonts on web pages

123‧‧‧Host

124‧‧‧ screen

130‧‧‧ font server

132‧‧‧ font generation module

134‧‧‧ original font database

S110~S190, S210~S230, S380~S430‧‧‧ Flowchart steps

1 is a schematic diagram of an embodiment of a system of the present invention. 2A and 2B are flowcharts showing a first embodiment of a method for displaying a font on a webpage according to the present invention. 3A to 3C illustrate an embodiment of a web page of the present invention and variations thereof. 4A-4E are schematic diagrams showing information delivery relationships between a webpage source, a browser, and a font server. FIG. 5A and FIG. 5B are flowcharts showing a second embodiment of a method for displaying a font on a webpage according to the present invention. 6A-6E illustrate related embodiments of portions of the code of the web page of the browser of the present invention. 7A and 7B are schematic diagrams showing the information delivery relationship between the browser end and the font server.

Claims (12)

A method for displaying a font when a content of a webpage is changed includes: (a) downloading at least one webpage information from a webpage source corresponding to a webpage URL to a browser end, the webpage information including a connection information, at least one a word code information and a first font type information, the first word code information corresponding to the first font type information; (b) the browser terminal downloads a font display program from the font server according to the connection information; (c) the font display program downloads a first sub-set font file to the font server, and the browser displays a web page according to the first sub-set font file; (d) at the browser end And updating the content of the webpage to generate at least one second word code information, wherein the font image corresponding to the second word code information does not appear in the first subset font file, and the second word code information corresponds to a second type of information; (e) re-analysing all webpage information by the font display program; (f) the webpage of the webpage, the first wordcode information, the second wordcode information, the first Font information, and the second word The information is transmitted to the font server; (g) the font generation module generates the webpage based on the webpage address, the first character code information, the second word information, the first font information, and the second font information At least one corresponding second subset font file; (h) downloading the second subset font file to the browser; and (i) the browser terminal at least according to the second subset font file The first word code information, the second word code information, the first font information, and the second font information are presented on the web page. The method for displaying a font when the content of the webpage is changed according to the first item of the patent application, wherein in the step (d), the webpage information is updated by the browser application or the Javascript embedded in the browser. . The method for displaying a font when the content of the webpage is changed according to the first item of the patent application, wherein in the step (d), the second word information is corresponding to the second font information by the CSS language. The method for displaying a font when the content of the webpage is changed according to the first item of the patent application, wherein in the step (d), the second font information is the same as the first font information, in step (h) The second subset font file will overwrite the first subset font file. A method for displaying a font when a content of a webpage is changed includes: (a) downloading at least one webpage information from a webpage source corresponding to a webpage URL to a browser end, the webpage information including a connection information, at least one a word code information and a first font type information, the first word code information corresponding to the first font type information; (b) the browser terminal downloads a font display program from the font server according to the connection information; (c) the font display program downloads a first sub-set font file to the font server, and the browser displays a web page according to the first sub-set font file; (d) at the browser end And updating the content of the webpage to generate at least one second word code information, wherein the font image corresponding to the second word code information does not appear in the first subset font file, and the second word code information corresponds to a second type of information; (e) analyzing the second word information or the second type of information in the webpage information by the font display program; (f) the webpage of the webpage, the second Code information and the second type of information Sending to the font server; (g) the font generation module generates at least one corresponding second subset font file according to the webpage web address, the second character code information and the second font information; (h) Downloading the second sub-set font file to the browser; and (i) the browser displaying the second word information and the second font information on the webpage according to the second sub-set font file . The method for displaying a font when the content of the webpage is changed according to item 5 of the patent application scope, wherein in the step (d), the second word code information is mapped to an element, and in the step (e), The element is analyzed to analyze the second word information. The method for displaying a font when the content of the webpage is changed according to item 5 of the patent application scope, wherein in the step (d), the second word code information is corresponding to an element corresponding to the second font information. And in step (e), analyzing the second font information by analyzing the second font information. The method for displaying a font when the content of the webpage is changed according to the fifth item of the patent application, wherein in the step (d), if the second font information is the same as the first font information, but in the browser End, the name of the second font information is different from the name of the first font information; in step (f), the name of the second font information is changed to the name of the first font information and then transmitted to The font server; and in steps (h) and (i), the name of the second font information in the second subset font file is changed back to the original name of the second font information. The method for displaying a font when the content of the webpage is changed according to the fifth aspect of the patent application, wherein in the step (d), the webpage information is updated by the browser-side application or the Javascript embedded in the browser. . The method for displaying a font when the content of the webpage is changed according to the fifth item of the patent application, wherein in the step (d), the second character code information is corresponding to the second font information by using the CSS language. The method for displaying a font when the content of the webpage is changed according to item 5 of the patent application scope, wherein in the step (d), the second font type information is the same as the first font type information, and the font type in the step (e) The display program will also analyze the first word code information. In step (f), the browser terminal will also transmit the first word code information to the font server, and in the (h) step, the second sub-set font file. The effect will overwrite the first subset of font files. The method for displaying a font on a webpage according to any one of the items 1 to 11 of the patent application, wherein the browser end is a smart phone, a tablet computer, and a desktop type equipped with a browser software. Computer, or a laptop.