CN102436452A - Webpage providing system and method for dynamically adjusting font size - Google Patents

Abstract

The present invention discloses a web page providing system and method for dynamically adjusting font size. The system establishes a corresponding table of screen resolution and screen width in advance on a network server, reads the screen resolution of the client when receiving a web page browsing request from the client, and then searches the corresponding table according to the screen resolution to obtain the ratio of the horizontal resolution and the screen width, and then converts the physical value of the font size in the web page to be browsed into the font size browsing value. Finally, the web page is parsed by the browser of the client and then displayed. The technical effect of optimizing the physical size of the web page font on different display screens is achieved.

Description

Web page providing system and method for dynamically adjusting font size

technical field

The present invention relates to a system and method for providing a web page, in particular to a system and method for providing a web page that can display fonts of the same physical size on different display screens.

Background technique

Modern people live in the era of information explosion, and with the rapid development of network technology and the promotion of application level, it has become an indispensable part of modern people's life to browse the web through a browser to obtain all kinds of information they need .

In the past, the browsing of web pages was provided by the web servers of various information providers. When the client enters the URL or selects a link through the local browser to generate a browsing request, the web server will send the web page to the client, and the client The browser at the end will parse the webpage and display it on the monitor at the local end. However, since the font size in web pages provided by general web servers is often fixed, the same web page may have different physical sizes for clients using displays with different screen resolutions, different screen widths, and different browsers. font. For example, a web page with a proper font size on a certain display may have problems with too large fonts or too small fonts when the display is changed.

Although many browsers currently provide the function of zooming the font size of web pages, users can also adjust the display effect by adjusting the screen resolution, but users have to re-adjust the settings every time they open a different web page, causing users Repeated operations in use have caused considerable inconvenience to many users who do not know how to scale web fonts. Therefore, it is necessary to propose improved technical means to solve this problem.

Contents of the invention

In view of the problem in the prior art that different display terminals display fonts with different physical sizes when displaying webpages, the present invention discloses a system and method for dynamically adjusting font sizes for providing webpages, wherein:

The webpage providing system for dynamically adjusting the font size disclosed by the present invention is applicable to a webpage server, which includes: a webpage database, which pre-stores at least one webpage containing at least one physical value of font size; a receiving module, used for receiving from the client receiving a browsing request; the retrieval module is used to retrieve the web page corresponding to the browsing request, and is used to read the screen resolution used by the client from the client; the conversion module has a corresponding table established in advance, and the corresponding table contains at least one The screen resolution and the screen width corresponding to each screen resolution, the conversion module is used to read the physical value of each font size of the captured web page, and query the corresponding table according to the client's screen resolution to obtain the corresponding to the client's screen resolution According to the ratio of the horizontal resolution of the client's screen resolution and the corresponding screen width, the physical value of each font size is multiplied by the physical value of each font size to obtain the browsing value of each font size and generate an updated web page; and the transmission module is used to update The webpage is transmitted to the client and displayed after being parsed by the client's browser.

The method for providing a webpage with dynamically adjusted font size disclosed by the present invention is suitable for a webpage server, and includes the following steps: establishing a corresponding table on the network server in advance, and the corresponding table includes at least one screen resolution and the information corresponding to each screen resolution Screen width; pre-store at least one webpage in the web server, wherein each web page includes at least one font size physical value; the web server receives the browsing request from the client; the web server retrieves the web page corresponding to the browsing request; the web server reads the client from the client The screen resolution used by the client; the web server reads the physical value of each font size of the captured web page, and queries the corresponding table according to the screen resolution of the client to obtain the screen width corresponding to the screen resolution of the client; The ratio of the horizontal resolution of the screen resolution of the terminal to the corresponding screen width is multiplied by the physical value of each font size to obtain the browsing value of each font size and generate an updated web page; and the web server transmits the updated web page to the client and browsed by the client displayed after parsing.

The system and method disclosed in the present invention are as above, and the difference between the present invention and the prior art is that the present invention has a corresponding table of screen resolution and screen width established in the network server in advance, and reads the corresponding table when receiving the web page browsing request from the client. The screen resolution of the client, and then query the corresponding table according to the screen resolution to obtain the ratio of the horizontal resolution to the screen width, and then convert the physical value of the font size in the web page to be browsed into the font size browsing value, and finally the browser of the client parses the web page Then display the technical means.

Through the above-mentioned technical means, the present invention can achieve the technical effect of optimizing the physical value of the font size of the web page on different display screens.

Description of drawings

FIG. 1 is a block diagram of a system for providing webpages with dynamically adjusted font sizes according to the present invention.

Fig. 2 is a flow chart of the method for providing a web page with dynamically adjusted font size in the present invention.

Fig. 3 is a schematic diagram of the correspondence table of the embodiment of the present invention.

[Description of main component symbols]

101 webpage database 102 receiving module

103 Extraction module 104 Conversion module

105 transmission module 301 correspondence table

Detailed ways

The implementation of the present invention will be described in detail below in conjunction with the drawings and examples, so that the realization process of how to use technical means to solve technical problems and achieve technical effects in the present invention can be fully understood and implemented accordingly.

First, please refer to FIG. 1 , which is a block diagram of a system for dynamically adjusting font sizes of the present invention, which will be used to illustrate the functions of each module of the present invention. The system for providing webpages with dynamically adjusted font size of the present invention is applicable to a webpage server, which includes a webpage database 101 , a receiving module 102 , an extracting module 103 , a converting module 104 and a transmitting module 105 .

The web page database 101 is pre-established with at least one web page including at least one font size physical value. The physical value of the font size is equivalent to the actual font size of each displayed text on the webpage. For each webpage, in order to create different display effects, different displayed texts will have different physical font size values. For example, assuming that the title of an HTML webpage needs to be displayed in a larger font, the physical value of the font size can be set to 12mm, and the font of the content of the webpage only needs to be displayed in a font of a normal size, then the physical value of the font size can be set to 3mm.

The receiving module 102 is responsible for receiving browsing requests from the client. When the client needs to browse the webpage, it can generate a browsing request to browse a specific webpage through the local browser, and the receiving module 102 will be responsible for receiving the browsing request sent by the client.

The capturing module 103 is responsible for capturing the webpage corresponding to the browsing request, and is also responsible for reading the screen resolution used by the client from the client. It should be noted that after the capture module 103 captures the web page corresponding to the browsing request, it will read the client screen resolution from a section of JavaScript description in the captured web page.

The conversion module 104 is pre-established a correspondence table including at least one screen resolution and a screen width corresponding to each screen resolution. The generation of the correspondence table can be obtained by statistical methods in advance of the mainstream screen resolution and the mainstream screen size and ratio corresponding to the mainstream screen resolution, and then average the values to calculate the screen width. For example, suppose there is a screen resolution of 1024x768, and the screen size using the 1024x768 screen resolution obtained through statistical methods falls between 8 and 12 inches, then the average value of 10 inches can be taken as the mainstream corresponding to the 1024x768 screen resolution. screen size. After obtaining the mainstream screen size, then use statistical methods to obtain the screen widths of different screen ratios such as: 4:3, 16:9, 16:10, etc., and finally obtain the screen width corresponding to the 1024x 768 screen resolution through the average value . Since there are many ways of statistical methods, the method of obtaining the corresponding table is not limited here. Any method that can set the corresponding relationship between the screen resolution and the screen width can be used to generate the corresponding table described in the present invention.

After the capture module 103 captures the webpage corresponding to the browsing request and reads the screen resolution used by the client, the conversion module 104 will read the physical values of each font size in the captured webpage, and then according to the client's The screen resolution queries the corresponding table to obtain the screen width corresponding to the screen resolution of the client, and then converts the font size physical value into a corresponding font size browsing value and generates an update webpage. For example, assuming that the screen resolution of 1024x768 corresponds to a screen width of 304.8mm, since the horizontal resolution is 1024, it needs to use 3.36px (that is, pixels, "px" in the web page attribute value) to display a width of 1mm Indicates), so if you want to display text with a font size whose physical value is 4.32mm square, according to the ratio of 1024px to 304.8mm, you can convert it to use a font size browsing value of 14.5px. It should be noted that the physical value of the font size is the actual size of the text displayed on the webpage, and the browsing value of the font size is the font size value that the browser can actually parse and display after conversion based on the physical value of the font size. In addition, it is worth noting that, since the display effect is better in the case of px values of even points such as: 14, 16, 18..., you can only take the px value of even points as the font size browsing value. It should be noted that the font size browsing value can not only be a pixel (px) value, but also can be a unit of an adjusted font size (em) or a browser default font size percentage. For example, assuming that the default font size of the browser is 16px, then 1em=100%=16px, at this time 0.75em=75%=12px. When the default font size of the browser is 12px, then 1em=100%=12px, at this time 2em=200%=24px.

When the updated webpage is generated directly with the pixel (px) value, the font of the webpage will be displayed directly in the form of px during the process of parsing and displaying the webpage by the client browser. Set the font size percentage (%) to generate an updated webpage, after the browser parses and displays the webpage, the client can still re-scale the webpage text by changing the default font size of the browser, so as to make the webpage font display size It is more in line with the browsing needs of the client.

The transmission module 105 is responsible for transmitting the updated webpage generated by the conversion module 104 to the client, and the browser of the client will display it after parsing.

In this way, when different display terminals browse the same webpage, even if monitors with different screen resolutions, different screen widths, and different browsers are used, the physical font size of the webpage text displayed can be roughly consistent, thereby improving webpage text. display effect.

Next, please refer to FIG. 2 , which is a flow chart of the method for providing a web page with dynamically adjusted font size according to the present invention, which will be used to illustrate the implementation process of the present invention. The method for providing a web page with dynamically adjusted font size of the present invention is applicable to a web server. In the web server, a correspondence table including at least one screen resolution and a screen width corresponding to each screen resolution is first established in advance (step 201). The generation of the correspondence table can be obtained by statistical methods in advance of the mainstream screen resolution and the mainstream screen size and ratio corresponding to the mainstream screen resolution, and then average the values to calculate the screen width. For example, suppose there is a screen resolution of 1024x 768, and the screen size using the 1024x 768 screen resolution obtained through statistical methods falls between 8 and 12 inches, then the average value of 10 inches can be taken as the corresponding 1024x 768 screen resolution mainstream screen sizes. After obtaining the mainstream screen size, then use statistical methods to obtain the screen widths of different screen ratios such as: 4:3, 16:9, 16:10, etc., and finally obtain the screen width corresponding to the 1024x 768 screen resolution through the average value . Since there are many methods of statistical methods, the method of obtaining the corresponding table is not limited here, and any method that can set the corresponding relationship between the screen resolution and the screen width can be used to generate the corresponding table described in the present invention.

In addition to establishing the correspondence table, the method also pre-stores at least one webpage on the webpage server (step 202), and each webpage also includes at least one physical font size value. It should be noted that the physical value of the font size is equivalent to the actual font size of each display text on the web page. For each web page, in order to create different display effects, different display text will correspond to different fonts. Size physical value. For example, assuming that the title of an HTML webpage needs to be displayed in a larger font, the physical value of the font size can be set to 12mm, and the font of the content of the webpage only needs to be displayed in a font of a normal size, then the physical value of the font size can be set to 3mm.

Then, the web server receives a browsing request from the client (step 203). When the client needs to browse the web, it can generate a browsing request to browse a specific web page through the browser at the local end. After the web server receives the browsing request, it will then The webpage corresponding to the browsing request is retrieved (step 204), and the screen resolution used by the client is read from the client (step 205). It should be noted that after the web server retrieves the webpage corresponding to the browsing request, it will read the screen resolution of the client from a section of the JavaScript description in the retrieved webpage that contains the screen resolution of the client.

After the web server obtains the screen resolution of the client, the web server will then read the physical value of each font size of the captured web page, and query the corresponding table according to the screen resolution of the client to obtain the screen width corresponding to the screen resolution of the client (step 206), then the web server multiplies the physical values of the font sizes according to the ratio of the horizontal resolution of the client's screen resolution and the corresponding screen width, to obtain the browsing values of the font sizes and generate an updated webpage (step 207). For example, assuming that the screen resolution of 1024x 768 corresponds to a screen width of 304.8mm, since the horizontal resolution is 1024, it needs to use 3.36px to display a width of 1mm, so if the physical value of the font size to be displayed is 4.32mm For square text, according to the ratio of 1024px to 304.8mm, it can be converted to a font size browsing value of 14.5px. It should be noted that the physical value of the font size is the actual size when displaying the text on the web page, and the browsing value of the font size can not only be the pixel (px) value, but also can be adjusted font size (em) or browser preset Font size percentage (%). It is worth noting that since the display effect is better in the case of even pixels (px) such as: 14, 16, 18..., when the font size browse value is in pixels (px), you can only take the value of even points as Font size browse value.

After the web server converts the font size physical value into the font size browsing value, it can directly generate an updated web page. When the updated webpage is generated directly with pixel (px) value, during the process of parsing and displaying the webpage by the client browser, the font size of the webpage will be directly displayed in the form of px, and when the font size (em) or browsing When the browser default font size percentage (%) is generated to update the webpage, after the browser parses and displays the webpage, the client can still re-scale the webpage text through the browser settings, so as to make the font display size of the webpage smaller Meet the browsing needs of the client.

Finally, the web server transmits the updated web page to the client and displays it after being parsed by the browser of the client (step 207).

Next, the detailed implementation of the present invention will be described with an embodiment together with the drawings of the present invention.

Assuming that there is a web server with the present invention applied thereto, it has pre-established a corresponding table including at least one screen resolution and the screen width corresponding to each screen resolution, as shown in the corresponding table 301 of FIG. 3 , different screen resolutions correspond to There are different screen widths, and a ratio can be obtained with different horizontal resolutions and screen widths. In addition to establishing a corresponding table in the webpage server, at least one webpage is also stored, and each webpage includes at least one display attribute of a font size physical value. For example, assuming that the webpage stored in the webpage server is an HTML webpage, and assuming that there is a first webpage whose title needs to be displayed with an actual font size of 3mm, the physical value of the font size can be set as 3mm.

Assume that there is an existing first client with a resolution of 1024x768. When the first client generates a browsing request through the local browser and sends it to the web server, the web server will retrieve the corresponding web page according to the browsing request. And obtain the screen resolution of the first client through a JavaScript description of the webpage. Assuming that the user wants to browse the first web page, after the web server retrieves the first web page, it will first read the display attribute of the font size physical value in the first web page, and then query the corresponding table according to the screen resolution of 1024x768 to obtain the screen Width 304.8mm. After obtaining the screen width, convert the font size physical value into the font size browsing value according to the ratio of the horizontal resolution of the screen resolution of the first client to the screen width. Take the example in which the display attribute of the font size physical value in the title of the first webpage is 3mm, since the actual size to be displayed is 3mm, according to the ratio of the horizontal resolution of the screen resolution of the first client to the screen width, it can be Find the font size browser value should take 10.07px. Since the font size displayed with the px value of even points will have a better display effect in the general browser parsing process, when taking the font size browsing value, it is also possible to replace the original font with only the px value of even points Size the physical value and generate an update page.

It should be noted that, in addition to directly using the pixel (px) value as the font size browsing value to generate an updated webpage, the web server can also use the adjusted font size (em) or the browser’s default font size percentage (%) as the font The size browse value generates an updated page. When the updated webpage is generated directly with pixel (px) value, the font size of the webpage will be directly displayed in px during the process of parsing and displaying the webpage by the client browser, and when the font size (em) or browser When the default font size percentage (%) is generated to update the webpage, after the browser parses and displays the webpage, the client can still re-scale the text on the webpage through the browser settings, so as to make the font size of the webpage more suitable Client browsing needs.

Finally, the webpage server transmits the webpage to the first client, and after being parsed by the browser of the first client, a webpage with a title font size of 3mm can be displayed. Assuming that the existing second client uses a different screen resolution of 1280x 1024 from the first client, then when the second client also wants to browse the first web page, the web server will first query the screen resolution corresponding to 1280x 1024 Screen width, and then according to the ratio of the horizontal resolution of the screen resolution to the screen width, the font size physical value is converted into the font size browsing value, and then an updated web page is generated and sent to the second client, which is parsed by the browser of the second client to display. In this way, although the first client and the second client use different screen resolutions to browse the webpage, for the first client and the second client, the font size of the title of the first webpage will be 3mm, so that different display The terminal can still display the same webpage font size, which improves the display effect of webpage fonts.

Although the disclosed embodiments of the present invention are as above, the content described is not intended to directly limit the patent protection scope of the present invention. Any person skilled in the technical field to which the present invention belongs can make some changes in the forms and details of the implementation without departing from the disclosed spirit and scope of the present invention. The scope of patent protection of the present invention must still be defined by the appended claims as the criterion.

Claims (6)

1. A webpage providing system for dynamically adjusting font size, suitable for a webpage server, characterized in that it includes: A web page database, pre-stored with at least one web page including at least one font size physical value; A receiving module, used for receiving a browsing request from a client; A capture module, used to capture the webpage corresponding to the browsing request, and used to read the screen resolution used by the client from the client; A conversion module, which establishes a correspondence table in advance, and the correspondence table includes at least one screen resolution and a screen width corresponding to the screen resolution, and the conversion module is used to read the font size physical value, and query the corresponding table according to the screen resolution of the client to obtain the screen width corresponding to the screen resolution of the client, and then according to the horizontal resolution of the screen resolution of the client and the corresponding screen width Multiply the ratio of each font size by the physical value of each font size to obtain the browsing value of each font size and generate an updated web page; and A transmission module is used for transmitting the update webpage to the client and displaying it after being parsed by the browser of the client. 2. The system for providing a web page with dynamically adjusted font size as claimed in claim 1, wherein each browse value of the font size is a pixel, a modified font size, or a browser preset font size percentage. 3. The webpage providing system for dynamically adjusting font size as claimed in claim 2, characterized in that, when the browsing value of the font size is in pixels, only an even point value is used. 4. A webpage providing method for dynamically adjusting font size, suitable for a webpage server, is characterized in that it comprises the following steps: Establishing a correspondence table in the network server in advance, the correspondence table includes at least one screen resolution and a screen width corresponding to each of the screen resolutions; storing at least one webpage in advance on the webpage server, wherein each of the webpages includes at least one font size physical value; The web server receives a browsing request from a client; The web server retrieves the web page corresponding to the browsing request; The web server reads from the client the screen resolution used by the client; The web server reads the retrieved physical values of font sizes of the webpage, and queries the corresponding table according to the screen resolution of the client to obtain the screen width corresponding to the screen resolution of the client; The web server multiplies the physical value of each font size according to the ratio of the horizontal resolution of the screen resolution of the client to the corresponding screen width, so as to obtain browsing values of each font size and generate an updated webpage; and The webpage server transmits the updated webpage to the client and displays it after being parsed by the browser of the client. 5 . The method for providing a web page with dynamically adjusted font size as claimed in claim 4 , wherein each browsing value of the font size is a pixel, a modified font size, or a browser preset font size percentage. 5 . 6. The method for providing a web page with dynamically adjusted font size as claimed in claim 5, wherein when the browse value of the font size is pixels, only an even point value is used.

Images