Program, user terminal, server, method, and system

Abstract

Improve the performance of web page display. [Solution] A program for causing a system having a user terminal and a server capable of communicating with the user terminal via a network to execute the following steps: the user terminal identifying the font type actually used on a web page; the user terminal sending information indicating the identified font type to the server; the server selecting CSS (Cascading Style Sheets) containing font information corresponding to the font type from multiple font information stored as static files based on the received information indicating the font type, and returning the selected CSS to the user terminal; and the user terminal applying the returned CSS to the web page.

Description

[Technical Field]

[0001] The present disclosure relates to a program, a user terminal, a server, a method, and a system. [Background technology]

[0002] Font distribution technology is widely used to display stylish fonts on web pages in addition to standard fonts. Font distribution technology allows users to download font data from a server and apply it to web pages, even if the font is not installed on the user's computer, allowing text to be displayed as intended by the author.

[0003] Conventional font distribution technology involves defining all font information potentially used across an entire website in a single CSS (Cascading Style Sheets) file, which is then statically loaded on the web page. Users specify this CSS file using a link tag in HTML (Hypertext Markup Language). The browser then downloads this CSS file, interprets its contents, and downloads from the server the font files specified within the CSS file using the @font-face rule. The @font-face rule is a CSS mechanism for associating a specific font file with its font name, style, weight, and other characteristics.

[0004] However, this method had the problem that the size of CSS files became larger as website designs became more complex and the number of font types and weights (thicknesses) used increased. As a result, huge files containing information about fonts that were not actually used on the page had to be downloaded, blocking browser rendering and significantly slowing the initial display speed of web pages. Here, rendering refers to the overall process by which a browser interprets HTML, CSS, and other code and displays it on the screen as a visual web page that can be viewed by the user.

[0005] To solve this problem, for example, Patent Document 1 discloses a technology known as a dynamic subset method, in which the content is analyzed on the server side, only the font information required for displaying the content is extracted, and a partial font containing only the required character glyphs is dynamically generated from the original font file and sent to the terminal. [Prior art documents] [Patent documents]

[0006] [Patent Document 1] Japanese Patent Application Laid-Open No. 2017-211953 Summary of the Invention [Problem to be solved by the invention]

[0007] In the technology disclosed in Patent Document 1, the server determines whether a font is necessary. Therefore, when multiple CSS rules conflict, the CSS priority calculation ("cascade processing") may result in the server determining that a font is necessary based solely on the HTML description or the presence of a CSS selector, even if the font ultimately will not be displayed on the screen. As a result, unnecessary font information may be sent to the terminal. Here, a selector is a CSS description (e.g., "h1" or ".classname") that specifies which HTML element to apply a style to.

[0008] Furthermore, the technology disclosed in Patent Document 1 requires the server to perform dynamic processing such as analyzing content, identifying reference fonts, and generating partial fonts each time a request is received from a client. This increases the processing load on the server, and the resulting processing time leads to a new problem of delays in the display of web pages. In particular, for websites with high traffic and concentrated access, the server's response performance can become a bottleneck, making it difficult to provide stable services.

[0009] An object of the present disclosure is to improve the display performance of web pages by efficiently obtaining only font information for fonts that are actually displayed on the web page without placing an excessive load on the server. [Means for solving the problem]

[0010] In order to solve the above-mentioned problems, a program according to one embodiment of the present disclosure is a program for causing a system including a user terminal and a server capable of communicating with the user terminal via a network to execute the following steps: the user terminal identifying the font type actually used on the web page; the user terminal transmitting information indicating the identified font type to the server; the server selecting a CSS including font information corresponding to the font type from multiple font information stored as static files based on the received information indicating the font type, and returning the selected CSS to the user terminal; and the user terminal applying the returned CSS to the web page. [Effects of the Invention]

[0011] According to the present disclosure, it is possible to efficiently obtain only font information for fonts that are actually displayed on a web page without placing an excessive load on the server, thereby improving the display performance of the web page. [Brief explanation of the drawings]

[0012] [Figure 1] FIG. 1 is a block diagram illustrating an example of the overall configuration of a system. [Figure 2] 2 is a block diagram showing an example of the configuration of a user terminal shown in FIG. 1. FIG. [Figure 3] 2 is a block diagram showing an example of the configuration of a server shown in FIG. 1. FIG. [Figure 4] FIG. 10 is a diagram illustrating an example of the data structure of a font resource database. [Figure 5] FIG. 10 is a sequence diagram illustrating an example of system operation. DETAILED DESCRIPTION OF THE INVENTION

[0013] Hereinafter, embodiments of the present disclosure will be described with reference to the drawings. In all drawings describing the embodiments, common components are designated by the same reference numerals, and repeated explanations will be omitted. Note that the following embodiments do not unduly limit the content of the present disclosure described in the claims. Furthermore, not all components shown in the embodiments are necessarily essential components of the present disclosure. Furthermore, each drawing is a schematic diagram and is not necessarily a precise illustration.

[0014] In the following description, a "processor" refers to one or more processors. A processor may be expressed as, for example, processing circuitry. The at least one processor is typically a microprocessor such as a CPU (Central Processing Unit), but may also be another type of processor such as a GPU (Graphics Processing Unit). The at least one processor may be single-core or multi-core. The at least one processor may also be a general-purpose processor or a special-purpose processor.

[0015] Furthermore, the at least one processor may be a processor in the broad sense, such as a hardware circuit (for example, a field-programmable gate array (FPGA) or an application-specific integrated circuit (ASIC)) that performs part or all of the processing.

[0016] In the following explanation, information that produces an output for an input may be described using expressions such as "xxx table," but this information may be data of any structure, or may be a learning model such as a neural network that produces an output for an input. Therefore, an "xxx table" may be referred to as "xxx information."

[0017] Furthermore, in the following description, the configuration of each table is an example, and one table may be divided into two or more tables, or all or part of two or more tables may be one table.

[0018] The program may be pre-installed in the information processing device described below, or may be stored on a recording medium (e.g., non-transitory) that can be read by the information processing device and then installed in the information processing device. The program may also be transmitted from a program distribution server to the information processing device and installed. In the following description, two or more programs may be realized as one program, or one program may be realized as two or more programs.

[0019] In the following description, various types of identification information are used, but the identification information may be any information that indicates a specific object, and the specific data is not limited to those described in the embodiments. The identification information may be an identification number or an identifier including letters and symbols.

[0020] [First embodiment] <1. Overview> When a user browses a web page, the system according to this embodiment efficiently acquires and applies only the font information of the fonts actually used on that web page. Specifically, a program (e.g., JavaScript) running on the browser of the user's device analyzes the rendering results of the web page and identifies the font type (font type) that is actually required. The program then requests only the information indicating the identified font type from the server. Instead of dynamically generating a font file, the server selects a font corresponding to the requested font type from a static CSS file prepared in advance and returns the font information for that font. The browser on the user's device then applies the received CSS to the page, downloads the specified font file, and updates the display. This eliminates the download of unnecessary font information, reduces the processing load on the server, and significantly improves the display speed of web pages.

[0021] <2. System Configuration> FIG. 1 is a block diagram showing an example of the overall configuration of a system 1 according to this embodiment. The system 1 is a client-server system, and includes one or more user terminals 10 and a server 20. In FIG. 1, only one user terminal 10 is shown to simplify the drawing. The user terminal 10 and the server 20 are connected to each other so as to be able to communicate with each other via a network 80 such as the Internet or a LAN (Local Area Network).

[0022] The user terminal 10 is a computer (information processing device) that a user operates to browse a web page. Specific examples include a personal computer (PC), a tablet terminal, a smartphone, a smart TV, or a game console.

[0023] The user terminal 10 executes a web browser (e.g., Google Chrome, Apple Safari, Mozilla Firefox, etc.) The web browser functions as an execution environment for a program according to one embodiment of the present disclosure, i.e., a platform for interpreting and executing program code.

[0024] The user terminal 10 executes an application such as a web browser and displays the content of a web page obtained from a web server (not shown). A web page is a digital document composed of a group of files such as HTML, CSS, and JavaScript (registered trademark), and is interpreted and visually displayed by the web browser. HTML is a markup language that defines the structure and content of a web page. CSS is a language for specifying the style (e.g., layout, color, font, etc.) of a web page. JavaScript is a programming language for adding dynamic functions to a page. In recent years, single-page applications (SPAs) that are built using frameworks such as React, Vue.js, and Angular and whose content changes dynamically within a single page are also included in the web pages according to one embodiment of the present disclosure.

[0025] In this embodiment, the user terminal 10 executes a program (typically JavaScript) included in a web page to perform processes such as identifying a font type, sending a request, and applying the received CSS, which will be described later. Note that the program included in the web page is not limited to JavaScript, and may be, for example, WebAssembly or TypeScript (registered trademark).

[0026] The user terminal 10 includes a communication IF (Interface) 12, an input device 13, an output device 14, a memory 15, a storage 16, and a processor 19. The input device 13 is a device for receiving input operations from a user (e.g., a touch panel, a touch pad, a pointing device such as a mouse, or a keyboard). The output device 14 is a device for presenting information to a user (e.g., a display, a speaker).

[0027] The server 20 is a computer (information processing device) that provides information about fonts that can be displayed on a web page. The server 20 is constructed using web server software such as Nginx or Apache, and is specialized in distributing fonts. The server 20 stores a CSS file 262 containing font information corresponding to multiple font types, and a font file 263 (e.g., a file in the highly compressed ".woff2" format or the general-purpose ".woff" format) as static files. See FIG. 3 for the CSS file 262 and the font file 263.

[0028] A font type is a type of font that is uniquely determined by a combination of the font family name (e.g., Roboto, Noto Sans JP), weight (thickness), style, etc. For example, even within the same font family, "Noto Sans JP," "Weight: 100 (Thin)," "Weight: 400 (Regular)," "Weight: 700 (Bold)," and "Weight: 900 (Black)" are each treated as different font types. Similarly, "Style: normal" and "Style: italic" are also distinguished.

[0029] Font information is defined by the CSS @font-face rule. The @font-face rule contains descriptors (properties used within the @font-face rule) such as font-family (font name), src (URL indicating the location of the font file), font-weight (weight / boldness), and font-style (style). For performance optimization, the @font-face rule may also contain descriptors such as font-display (specifying behavior while the font is loading) and unicode-range (specifying the range of characters that the font supports).

[0030] "Stored as a static file" refers to a state in which the content is not dynamically generated in response to a request, but rather exists in advance as a file with fixed content in the file system of storage 26, regardless of whether a request is made or not. By adopting this "stored as a static file" configuration, dynamic generation processing on the server 20 side is unnecessary. This reduces TTFB (Time to First Byte), i.e., the time from when the browser sends a request to when it receives the first byte of data from the server, and enables active caching (temporary storage of data) by the browser and the CDN described below.

[0031] In response to a request received from the user terminal 10, the server 20 returns an appropriate CSS file 262.

[0032] Server 20 includes a communication IF 22, an input / output IF 23, a memory 25, a storage 26, and a processor 29. The input / output IF 23 functions as an interface for an input device (not shown) for receiving input operations from an administrator of server 20, and an output device (not shown) for outputting information to the administrator. Server 20 may be configured as a single physical server, or may be realized in a cloud computing environment in which functions are distributed across multiple servers.

[0033] <3. User terminal configuration> Fig. 2 is a block diagram showing an example configuration of the user terminal 10 shown in Fig. 1. The user terminal 10 includes a communication unit 120, an input device 13, an output device 14, an audio processing unit 170, a microphone 171, a speaker 172, a camera 160, a position information sensor 150, an acceleration sensor 155, a storage unit 180, and a control unit 190. The blocks included in the user terminal 10 are electrically connected by, for example, a bus or the like.

[0034] The communication unit 120 performs processing such as modulation and demodulation for communication between the user terminal 10 and an external device (e.g., server 20). The communication unit 120 performs transmission processing on the signal generated by the control unit 190 and transmits it to the external device. The communication unit 120 performs reception processing on the signal received from the external device and outputs it to the control unit 190.

[0035] The input device 13 is a device for a user to input instructions or information. The input device 13 is realized, for example, by a touch-sensitive device 131 that inputs instructions by touching an operation surface. When the user terminal 10 is a PC or the like, the input device 13 may be realized by a reader, keyboard, mouse, or the like. The input device 13 converts instructions input by the user into electrical signals and outputs them to the control unit 190. The input device 13 may include, for example, a receiving port that receives electrical signals input from an external input device.

[0036] The output device 14 is a device for presenting information to a user. The output device 14 is realized, for example, by a display 141. The display 141 displays various types of information according to the control of the control unit 190. The display 141 is realized, for example, by an LCD (Liquid Crystal Display) or an organic EL (Electro-Luminescence) display.

[0037] The audio processing unit 170 performs, for example, digital-to-analog conversion processing of an audio signal. The audio processing unit 170 converts a signal provided from the microphone 171 into a digital signal and provides the converted signal to the control unit 190. The audio processing unit 170 also provides the audio signal to the speaker 172. The audio processing unit 170 is realized, for example, by a processor for audio processing. The microphone 171 receives audio input and provides an audio signal corresponding to the audio input to the audio processing unit 170. The speaker 172 converts the audio signal provided from the audio processing unit 170 into audio and outputs the audio to the outside of the user terminal 10.

[0038] The camera 160 is an imaging device that captures images using visible light. In other words, the camera 160 is a device that receives visible light using a light-receiving element and outputs image data as an image capture signal. The camera 160 captures an image of a subject in a certain direction and within a certain image capture range relative to the user terminal 10, and outputs image data as the image capture result. If the camera 160 has a function that allows the image capture range, or more precisely, the angle of view, to be adjustable, the camera 160 also outputs information regarding this angle of view. This function is known as a zoom function.

[0039] The position information sensor 150 is a sensor that detects the position of the user terminal 10 and is generally a GNSS device, such as a GPS module. The GPS module is a receiving device used in a satellite positioning system. In a satellite positioning system, signals are received from at least three or four satellites, and the current position of the user terminal 10 equipped with the GPS module is detected as coordinate values ​​based on the received signals. The position information sensor 150 may detect the current position of the user terminal 10 from the position of a wireless base station to which the user terminal 10 is connected via the communication unit 120.

[0040] The acceleration sensor 155 is a sensor that detects the acceleration applied to the user terminal 10. Preferably, the acceleration sensor 155 has a function of detecting the tilt around each axis (X-axis, Y-axis, Z-axis) of a three-dimensional coordinate system with the position of the user terminal 10 as the origin. The acceleration sensor 155 having such a function can detect the attitude of the user terminal 10, that is, the direction with respect to the X-axis, Y-axis, and Z-axis, by detecting the gravitational acceleration of the earth.

[0041] The storage unit 180 is realized by the memory 15 and storage 16 shown in FIG. 1 and stores data and various programs used by the user terminal 10. The storage unit 180 stores, for example, an application program 181. The application program 181 may be, for example, pre-stored in the storage unit 180 or may be downloaded from a web server or the like via the communication IF 12. The application program 181 is, for example, JavaScript that is stored in the storage unit 180 and executed on a web browser.

[0042] The control unit 190 is realized, for example, by the processor 19 reading a program (including the application program 181) stored in the storage unit 180 and executing instructions included in the program. The control unit 190 controls the operation of the user terminal 10. The control unit 190 operates in accordance with the application program 181 to fulfill the functions of an identification unit 191, a transmission unit 192, a reception unit 193, and an application unit 194.

[0043] The identification unit 191 identifies the font type actually used in the web page. In this embodiment, the identification unit 191 starts the process of identifying the font type after the browser analyzes the HTML of the web page and builds a DOM (Document Object Model) tree. "DOM" is a standard interface that represents each element of an HTML document as an object in a hierarchical tree structure (DOM tree) and makes it accessible and operable from a program.

[0044] Specifically, the process of identifying the font type is triggered by, for example, the firing of a DOMContentLoaded event, which indicates that the browser has completed construction of the DOM tree. However, the timing for starting the process of identifying the font type is not limited to this example. For example, the process may start (i) when all content (images, etc.) included in the web page has been completely loaded (when the load event is fired), (ii) when a predetermined time (e.g., 500 milliseconds) has elapsed after the DOM tree is constructed, (iii) when the user performs an operation such as scrolling the page, or (iv) when a new component is displayed in a single-page application (SPA). The identification unit 191 scans all elements (e.g., tags such as h1, p, and span) in the DOM tree one by one.

[0045] The specification unit 191 executes the getComputedStyle method, which is an API (Application Programming Interface) provided by the browser, for each element in the DOM tree. The getComputedStyle method has a function of acquiring the calculated style that is finally applied to the rendering of the element after performing a CSS priority calculation (cascade processing) taking into account all style definitions, such as external CSS files, internal style sheets, inline styles, and the default style sheet of the user agent.

[0046] The identification unit 191 identifies the font type actually used by the element by obtaining the values ​​of the font-family, font-weight, and font-style properties from the calculated style object, which is the return value of this method. This prevents, for example, erroneous detection of a font that is not actually displayed because it has low priority, even if multiple fonts are specified in CSS. Here, "actually used" refers to a font applied to an element that is drawn (rendered) on the screen by the browser. Therefore, the identification unit 191 excludes from the identification target font types applied to elements that exist in the DOM tree but are not displayed on the screen, for example, using CSS properties such as "display:none;" and "visibility:hidden;." This prevents the acquisition of font information that does not directly contribute to the initial display and maximizes the optimization effect. The identification unit 191 performs this process for all elements on the page and creates a unique list of font types used.

[0047] The transmission unit 192 transmits information indicating the identified font type to the server 20. This information is serialized (object converted into a character string) as data in JSON (JavaScript Object Notation) format, for example, as follows: [{family:"Roboto", weight:400, style:"normal"},{family:"Noto Sans JP", weight:700, style:"normal"}]. JSON is widely used as a lightweight data exchange format.

[0048] The transmission by the transmission unit 192 is performed by asynchronous communication (Ajax) using, for example, the Fetch API or the like. Asynchronous communication is a technique for exchanging data with a server in the background without reloading the entire page. This technique prevents other browser processes (such as image loading) from being blocked while waiting for a response from the server 20, and does not impair the user experience. Note that synchronous communication may also be used for transmission by the transmission unit 192.

[0049] The receiving unit 193 receives the CSS returned from the server 20. Here, the name "Cascading" of CSS comes from the prioritization mechanism for determining which style to apply when multiple style definitions conflict. This priority is calculated based on the source of the read (e.g., creator style sheet, user style sheet, etc.), the specificity of the selector (e.g., ID selector takes precedence over class selector), and the order of description. In the present disclosure, the result of this complex calculation is obtained on the client (user terminal 10) side. The returned CSS is text data including font information corresponding to the requested font type.

[0050] The application unit 194 applies the CSS returned from the server 20 to the web page. Specifically, the application unit 194 dynamically generates a style element having the content of the CSS text received from the server 20. The CSS text will be described in detail later. The application unit 194 then inserts the generated style element into the head section of the DOM tree of the web page. The moment it is inserted into the head section, the browser immediately recognizes and begins interpreting the new style rules. In accordance with the @font-face rule in the CSS, downloading of a font file 263 (e.g., .woff2) from the specified URL begins, and after the download is complete, the text is redrawn in the desired font.

[0051] <4. Server configuration> Fig. 3 is a block diagram showing an example configuration of server 20 shown in Fig. 1. Server 20 includes a communication unit 210, a storage unit 280, and a control unit 290. The blocks included in server 20 are electrically connected by, for example, a bus or the like.

[0052] The communication unit 210 performs processing for the server 20 to communicate with an external device (e.g., the user terminal 10). The storage unit 280 is realized by the memory 25 and storage 26 shown in FIG. 1, and stores data and various programs used by the server 20. The storage unit 280 holds a font resource database 261, a plurality of CSS files 262, and a plurality of font files 263 as static files. Details of the font resource database 261 will be described later.

[0053] The control unit 290 is realized by the processor 29 reading a program stored in the storage unit 280 and executing instructions included in the program. The control unit 290 controls the operation of the server 20. The control unit 290 functions as a receiving unit 291, a selecting unit 292, and a returning unit 293 by operating in accordance with the program.

[0054] The receiving unit 291 receives, from the user terminal 10, information indicating the type of font actually used on the web page.

[0055] Based on the received information indicating the font type, the selection unit 292 selects a CSS file 262 containing font information corresponding to the font type actually used on the web page from among a plurality of font information stored as static files, i.e., a plurality of CSS files 262.

[0056] Specifically, the selection unit 292 refers to the font resource database 261 for each font type included in the list of font types indicated by the received information (e.g., [{family:"Roboto", weight:400, style:"normal"}]) and acquires the path of the corresponding CSS file 262. Then, the selection unit 292 reads the CSS file 262 at the acquired path from the storage unit 280. If multiple CSS files 262 are applicable, the contents of these files may be combined to generate one CSS text, or links to the individual CSS files 262 may be returned as a list.

[0057] The return unit 293 returns the selected CSS file 262 to the user terminal 10. The returned CSS content, i.e., the CSS text, is the content of the single selected CSS file 262 itself if one font type is requested, and is generated by combining the contents of the multiple selected CSS files 262 if multiple font types are requested. The return by the return unit 293 is performed, for example, by including the CSS text in the body of an HTTP response. An HTTP response is data that a server returns in response to an HTTP request from a browser. At this time, the server 20 performs almost no dynamic processing, resulting in an extremely fast response speed and an extremely low load on the server 20.

[0058] <5. Data Structure> 4 is a diagram showing an example of the data structure of the font resource database 261 stored in the storage unit 280 of the server 20. The font resource database 261 functions as an index that allows the selection unit 292 of the server 20 to quickly associate a font type requested by the user terminal 10 with a static resource file stored by the server 20.

[0059] The database shown in Figure 4 is a relational database, which manages data sets called tables, which are structured by rows and columns, by associating them with each other. In a database, a table is called a table, a column in a table is called a column, and a row in a table is called a record. In a relational database, relationships between tables can be set and associated.

[0060] Typically, each table has a column set as a primary key for uniquely identifying a record, but setting a primary key to a column is not essential. The control unit 290 of the server 20 can cause the processor 29 to add, delete, or update records in a specific table stored in the storage unit 280 according to various programs.

[0061] Note that Figure 4 is merely an example and does not exclude data that is not listed. Furthermore, even data listed in the same database may be stored in separate storage areas in the storage unit 280. For example, the font resource database 261 may be implemented as a key-value store. A "key-value store" is a simple database that manages data using pairs of unique keys and values.

[0062] The font resource database 261 has the following columns: "font type ID" (primary key), "font family name," "weight," "style," "CSS path," and "font file path." The information stored in each column can be changed and updated as needed. Each column is described in detail below.

[0063] "Font Type ID" is a column that stores identification information (ID), which is an identifier for uniquely identifying the font type of each record. "Font Family Name" is a column that stores a string (e.g., Roboto) corresponding to the CSS font-family property. "Weight" is a column that stores a numeric value (e.g., 100 to 900) or a string (e.g., bold) corresponding to the CSS font-weight property. "Style" is a column that stores a string (e.g., normal, italic) corresponding to the CSS font-style property. "CSS Path" is a column that stores the path to a single CSS file 262. The CSS file 262 stored in this column contains only the @font-face rule corresponding to the font type indicated by each record. The path format is, for example, a relative path indicating the location within the server 20 (e.g., " / css / Roboto-Regular.css"). Note that a configuration in which the CSS file 262 itself is stored in this database instead of a path can also be adopted. "Font file path" is a column that stores the path to the font file 263 (e.g., " / fonts / Roboto-Regular.woff2"). The path stored in this column is described, for example, in the src descriptor in the CSS file 262 indicated by the path stored in the "CSS path" column. Note that a configuration in which the font file 263 itself is stored in this database instead of the path can also be employed. The example in Figure 4 shows an example in which three font types are registered: regular and bold "Roboto" font, and regular "Noto Sans JP" font.

[0064] <6. Operation> An example of the operation of the system 1 will be described below with reference to the sequence diagram of FIG.

[0065] First, in step S101, when a user accesses a specific URL through the browser of the user terminal 10, the browser sends an HTTP request to a web server (not shown). The web server sends an HTML file or the like corresponding to the HTTP request to the user terminal 10. The user terminal 10 receives the HTML file or the like as a response from the web server. This HTML file includes a reference to a JavaScript file (e.g., a script tag).

[0066] Next, in step S102, the browser parses the received HTML from top to bottom and builds a DOM tree. When the DOM tree construction is complete, the browser fires a DOMContentLoaded event, which starts execution of the JavaScript loaded in step S101.

[0067] Next, in step S103 (identification step), JavaScript, functioning as the identification unit 191 of the user terminal 10, first obtains a list of all elements in the DOM tree using methods such as document.querySelectorAll('*'). document.querySelectorAll('*') is a method for searching for elements in the DOM using a CSS selector. By specifying "*" (the universal selector) as an argument, it has the function of obtaining a list of all HTML elements present in the web page. Next, JavaScript loops through each element in the obtained list and executes methods such as the window.getComputedStyle() method to obtain a calculated style object. The window.getComputedStyle() method is a function provided by the browser, and obtains an object containing information indicating the calculated style that will ultimately be applied to the element, taking into account all style definitions such as external CSS files and inline styles, as well as CSS priority calculations. Next, JavaScript extracts the fontFamily, fontWeight, and fontStyle property values ​​from the obtained object and combines them to generate a unique key (e.g., "Roboto-400-normal"). JavaScript then stores the generated keys in a Set object (a collection of unique values), etc. This allows for an efficient creation of a unique list of font types actually used on a web page.

[0068] Next, in step S104 (transmitting step), the transmitting unit 192 of the user terminal 10 converts (serializes) the list of font types created in step S103 into a character string in JSON format. Then, using the Fetch API or the like, the transmitting unit 192 transmits this JSON data in the request body using the HTTP POST method to a specific endpoint of the server 20 (the API communication destination URL, e.g., " / api / fonts"). The HTTP POST method is one of the request methods defined in HTTP, and is used when transmitting data in the request body to the server 20. Unlike the GET method, which includes parameters in the URL, this method is suitable for transmitting relatively large amounts of data and data with a complex structure.

[0069] Next, in step S105 (returning step), the receiving unit 291 of the server 20 receives an HTTP request from the user terminal 10 and parses the JSON data from the request body of the request to restore a list of font types. Next, the selecting unit 292 of the server 20 searches the font resource database 261 using each font type in the restored list as a key. For example, for the key "Roboto-400-normal", a record that matches all of the conditions "font family name = 'Roboto'", "weight = '400'", and "style = 'normal'" is searched for, and the path to the corresponding CSS file 262 (e.g., " / css / Roboto-Regular.css") is obtained.

[0070] Next, in step S106 (returning step), the return unit 293 of the server 20 reads out from the storage unit 280 the CSS files 262 indicated by all the paths acquired in step S105, combines the contents into one piece of text data (CSS text), and returns the combined CSS text to the user terminal 10 in a response body with a Content-Type header set to "text / css" along with an HTTP status code of 200 (OK).

[0071] Next, in step S107 (application step), the receiving unit 193 of the user terminal 10 obtains the CSS text from the response body of the HTTP response received from the server 20. Subsequently, the application unit 194 of the user terminal 10 generates a new style element in memory using document.createElement('style'). The document.createElement() method is a function that programmatically generates an HTML element with a tag name ('style' in this case) specified by an argument. Next, the application unit 194 sets the obtained CSS text to the textContent property of that element. Then, the application unit 194 adds the generated style element to the end of the head section of the DOM tree using document.head.appendChild(). The appendChild() method has a function of adding the element passed as an argument (in this case, the generated style element) to the end of the list of child elements of the specified parent element (in this case, document.head).

[0072] Next, in step S108, when the style element is added to the DOM, the rendering engine of the browser on the user terminal 10 automatically interprets the @font-face rule written in the style element. The rendering engine then sends a new HTTP GET request to the server 20 for the URL (the path of the font file 263) specified by the src descriptor in the rule.

[0073] Next, in step S109, the return unit 293 of the server 20 searches the font resource database 261 based on the received HTTP GET request and acquires the path to the requested font file 263 (e.g., .woff2 file).The return unit 293 then reads out the font file 263 indicated by the acquired path from the storage unit 280 and returns it to the user terminal 10 in the same way as normal static file distribution.

[0074] Next, in step S110, when the download of the font file 263 is completed, the browser of the user terminal 10 redraws the text of the web page using the downloaded font.

[0075] <7.Summary> As described above, according to this embodiment, the user terminal 10 can accurately identify and request only the font information of the fonts truly required for displaying a web page from the server 20. The server 20 only needs to return pre-prepared static files without performing any dynamic processing, resulting in an extremely low processing load and high scalability. This significantly reduces the amount of data initially loaded on a website, avoids rendering blocks, and dramatically improves the display performance of web pages.

[0076] Furthermore, this embodiment not only improves performance, but also dramatically improves the scalability and flexibility of web font distribution services. In other words, because the amount of data distributed depends on the actual usage situation, the number of registered fonts is no longer proportional to the amount of data initially loaded, as in conventional methods, and the practical upper limit on the number of fonts that can be registered in a single project can be eliminated. This allows designers and developers to select fonts more freely without worrying about font count restrictions.

[0077] Second Embodiment In the second embodiment, a configuration will be described in which the web font delivery method can be flexibly switched on a website project-by-project basis.

[0078] In website development and operation, dynamic font acquisition is not necessarily optimal for all pages. For example, for very simple pages that use only one fixed font, or in environments where JavaScript execution is restricted by corporate security policies, the traditional method of loading static CSS files all at once may be easier to implement and more stable.

[0079] Therefore, the system 1 according to the second embodiment is configured to be able to switch between the dynamic acquisition method described in the first embodiment (hereinafter referred to as "dynamic mode") and the conventional method of loading static CSS files in bulk (hereinafter referred to as "static mode") on a project-by-project basis. A project refers to a unit for managing a single website or web application. Specifically, units such as "Company A's corporate website," "Special website for a campaign for Product B," and "Administration dashboard for Service C" fall under the category of projects. More technically, a project can be defined as a management unit to which a common authentication key (API key), identifier, or dedicated endpoint is assigned in the font distribution service provided by the system 1.

[0080] A website administrator can select which delivery method to apply to a target project and save the settings through an administration screen accessible through a web browser. The administration screen is a web page that allows authorized users to configure various settings for the web service via a graphical user interface (GUI). These settings are saved in a database (not shown) stored in the storage unit 280 of the server 20, for example, in association with a "project ID" that uniquely identifies each project.

[0081] When the user terminal 10 requests a web page, the server 20 dynamically switches the code to be embedded in the web page in accordance with this setting. This switching process is executed when the server 20 generates and returns HTML in response to a request from the user terminal 10. Specifically, the server 20 references the delivery method setting ("static mode" or "dynamic mode") of the project corresponding to the request. Next, based on the referenced setting, the server 20 dynamically determines whether to embed a link tag for loading the CSS file 262 using the batch loading method into the HTML or a script tag for loading a JavaScript file into the HTML. For example, a server-side application such as PHP or Node.js or a template engine (e.g., EJS or Pug) running on the server 20 may switch the tags to be output by conditional branching in the HTML template in accordance with the project settings obtained from the database. The server 20 then returns the determined HTML to the user terminal 10.

[0082] For example, if the static mode is selected for the project, the server 20 inserts a link tag pointing to a huge CSS file containing all font information into the head section of the HTML and returns it. On the other hand, if the dynamic mode is selected, the server 20 inserts a tag to load the JavaScript file for identifying the font type, as described in the first embodiment, and returns it.

[0083] The second embodiment allows for flexible selection of the optimal font delivery method depending on the characteristics of the website and project, or the development phase. Furthermore, even if an unexpected problem occurs in dynamic mode (e.g., a malfunction due to a specific browser upgrade), the system can instantly switch to the conventional static mode from the management screen, functioning as a fail-safe mechanism to minimize adverse effects on the website. This improves the reliability and operability of the system, allowing switching between the old and new methods without compromising the user experience, while maintaining high rendering quality.

[0084] [Modification] Various modifications are possible without departing from the spirit of the present disclosure.

[0085] <First variant: CDN collaboration> In the first embodiment, the server 20 distributes the CSS file 262 and the font file 263. However, these static files may be stored on a content delivery network (CDN). A CDN is a system that speeds up display and stabilizes distribution by distributing content from cache servers distributed around the world via the server closest to the user. Specific examples include commercial services such as Amazon CloudFront, Cloudflare, and Akamai.

[0086] In this case, the URL of the font file 263 specified by the @font-face rule in the CSS file 262 returned to the user terminal 10 becomes the path on the CDN. After applying the CSS, the user terminal 10 obtains the font file 263, for example, from the geographically closest edge server of the CDN (a cache server located closest to the user terminal 10).

[0087] This significantly reduces the load on server 20, which is the origin server (the server that stores the original content). Furthermore, fonts can be delivered with low latency, especially for access from overseas, further improving the display performance of web pages. Thus, the configuration of the first modified example is highly compatible with the feature that server 20 handles static files, and has the advantage of maximizing the caching efficiency of the CDN.

[0088] <Second Modification: Variation of Font Identification Method> In the first embodiment, an example was described in which getComputedStyle was used to identify the font type, but the identification method is not limited to this. For example, it is also possible to combine it with the Intersection Observer API. This API provides a function to asynchronously monitor whether a specific element has entered the browser's viewport (display area).

[0089] Specifically, the identification unit 191 of the user terminal 10 first identifies the font type only for elements in the first view (the area displayed first) when the web page is initially displayed. Next, the transmission unit 192 of the user terminal 10 requests information indicating the identified font type from the server 20. Thereafter, each time the user scrolls the page and the Intersection Observer API detects that a new element has entered the viewport, the identification unit 191 identifies the font type required for that element, and the transmission unit 192 additionally requests information indicating that font type. By adopting such a delayed loading strategy, it is possible to further delay requests for fonts not required for initial display, thereby improving perceived speed.

[0090] <Third Modification: Program Provision Form> The application program 181 may be provided as a JavaScript file downloaded from the server 20 to the user terminal 10, or may be provided as, for example, WebAssembly. WebAssembly (Wasm) is a binary code designed for high-speed execution in a browser, and is compiled from languages ​​such as C++ and Rust. By implementing computationally intensive processes such as DOM traversal in WebAssembly, faster operation can be expected than by implementing it in JavaScript.

[0091] The application program 181 may also be provided as an extension of a web browser. Furthermore, the application program 181 may be provided as a plug-in for a static site generator (SSG) that statically generates a website. In this case, when building an HTML file, a reference (script tag) to a JavaScript file for specifying the font type and requesting it from the server 20 may be automatically embedded in the HTML file. A static site generator is a tool that generates an HTML file from a template and data in advance.

[0092] <Fourth Modification: Alternative Configuration of Specific Processing> In the first embodiment, an example was described in which JavaScript running on the browser of the user terminal 10 identifies the font type using getComputedStyle. However, the identification process may be realized by other methods. For example, the server 20 loads and renders the target web page using a headless browser (a browser without a GUI) such as Puppeteer or Selenium. The server 20 may then analyze a snapshot of the rendering result or acquire DOM information from the execution environment of the headless browser to identify the font type actually being used. In this case, the server 20 can generate pre-optimized CSS based on the information about the identified font type and return it to the user terminal 10.

[0093] Furthermore, in a development environment using a static site generator (SSG), it is also possible to incorporate a specific process executed by the specification unit 191 of the user terminal 10 into the website build process. Specifically, when the SSG generates HTML files and CSS files, the specification unit 191, which operates as a plug-in, statically analyzes the generated files. The specification unit 191 then creates a list of font types used on all pages, and automatically embeds JavaScript code for making a request to the server 20 based on the list, or a link tag to a CSS file containing font information, into the HTML file.

[0094] <Fifth Variation: Fallback Processing> In the dynamic mode of the second embodiment, it is desirable to provide a fallback mechanism in case JavaScript execution on the user terminal 10 fails for some reason (e.g., browser security settings, network errors, compatibility issues with older browsers, etc.) or in case a font information request to the server 20 fails. For example, a noscript tag is placed immediately after the script tag that loads the JavaScript file. This noscript tag contains a link tag for loading a comprehensive CSS file 262 that contains all font information in the project and is used in static mode. This ensures that fonts are applied in the conventional manner without display degradation even in an environment where JavaScript is not executed, improving the robustness of the system.

[0095] Although several embodiments of the present disclosure have been described above, these embodiments can be implemented in various other forms, and various omissions, substitutions, and modifications can be made without departing from the spirit of the invention. For example, a configuration or process in one embodiment may be combined with a configuration or process in another embodiment, or a modification of one embodiment may be applied to another embodiment. These embodiments and modifications are intended to be included within the scope and spirit of the invention, as well as within the scope of the invention and its equivalents as set forth in the claims.

[0096] [Note] The matters described in the above embodiments will be supplemented below.

[0097] <Appendix 1> A program for causing a system having a user terminal and a server capable of communicating with the user terminal via a network to execute the following steps: the user terminal identifying the font type actually used on a web page; the user terminal transmitting information indicating the identified font type to the server; the server selecting, based on the received information indicating the font type, CSS (Cascading Style Sheets) including font information corresponding to the font type from multiple font information stored as static files, and returning the selected CSS to the user terminal; and the user terminal applying the returned CSS to the web page.

[0098] <Appendix 2> A program described in (Appendix 1), in which, in the identifying step, after completing construction of the DOM (Document Object Model) of the web page, the font type is identified by obtaining the calculated style applied to elements within the web page.

[0099] <Appendix 3> A program described in (Appendix 1) or (Appendix 2) that switches between a method of loading static CSS files in bulk and a method of executing a series of steps from the identification step to the application step on a project-by-project basis.

[0100] <Appendix 4> A program described in any one of (Appendix 1) to (Appendix 3), wherein in the applying step, the CSS applied to the web page includes information indicating the location of a font file located on a content delivery network.

[0101] <Appendix 5> A program for causing a user terminal having a processor and a memory to execute the steps of: identifying the font type actually used on a web page; sending information indicating the identified font type to a server; and applying CSS (Cascading Style Sheets) returned from the server that corresponds to the font type and includes font information stored as a static file to the web page.

[0102] <Appendix 6> A program for causing a server having a processor and memory to execute the steps of receiving information indicating the font type used in a web page from a user terminal, and selecting a CSS (Cascading Style Sheets) including font information corresponding to the font type from multiple font information stored as static files based on the font type indicated in the received information, and returning the selected CSS to the user terminal.

[0103] <Appendix 7> A user terminal having a control unit and a memory unit, wherein the control unit executes the following processes: identifying the font type actually used on a web page; sending information indicating the identified font type to a server; and applying CSS (Cascading Style Sheets) returned from the server, which corresponds to the font type and includes font information stored as a static file, to the web page.

[0104] <Appendix 8> A server comprising a control unit and a memory unit, wherein the control unit executes the following processes: receiving information indicating the font type used in a web page from a user terminal; selecting a CSS (Cascading Style Sheets) including font information corresponding to the font type from among a plurality of font information stored as static files based on the font type indicated in the received information; and returning the selected CSS to the user terminal.

[0105] <Appendix 9> A method executed by a system having a user terminal and a server capable of communicating with the user terminal via a network, the method including the steps of: the user terminal identifying the font type actually used on the web page; the user terminal transmitting information indicating the identified font type to the server; the server selecting, based on the received information indicating the font type, CSS (Cascading Style Sheets) including font information corresponding to the font type from multiple font information stored as static files, and returning the selected CSS to the user terminal; and the user terminal applying the returned CSS to the web page.

[0106] <Appendix 10> A system comprising a user terminal and a server capable of communicating with the user terminal via a network, wherein the user terminal performs the following processes: identifying a font type used in a web page; transmitting information indicating the identified font type to the server; and applying CSS (Cascading Style Sheets) returned from the server that corresponds to the font type and includes font information stored as a static file to the web page; and the server receives the information indicating the font type from the user terminal; and, based on the font type indicated by the received information, selects a CSS including font information corresponding to the font type from multiple font information stored as static files, and returns the selected CSS to the user terminal. [Explanation of symbols]

[0107] 1. System 10...User terminal 190...Control unit 191…Specific section 192...Transmitter 193...Receiver 194…Applicable part 20...Server 290...Control unit 291...Receiver 292...Selection section 293...Return Section 80…Network

Claims

1. A system including a user terminal and a server capable of communicating with the user terminal via a network, a step of identifying font types actually used in a web page by the user terminal; a step of transmitting information indicating the identified font type to the server by the user terminal; the server selects, based on the received information indicating the font type, a CSS (Cascading Style Sheets) including font information corresponding to the font type from among a plurality of font information stored as static files, and returns the selected CSS to the user terminal; and a program for causing the user terminal to execute a step of applying the returned CSS to the web page.

2. 2. The program according to claim 1, wherein in the identifying step, the font type is identified by obtaining a calculated style that is applied to elements in the web page after construction of a document object model (DOM) of the web page is completed.

3. The server, A method in which all font information that may be used on the entire website is defined in one CSS file and that CSS file is loaded. a method for performing a series of steps from the identifying step to the applying step; 2. The program according to claim 1, wherein the program is executed in a switchable manner on a project-by-project basis.

4. 2. The program according to claim 1, wherein in the applying step, the CSS applied to the web page includes information indicating the location of a font file located on a content delivery network.

5. A user terminal including a processor and a memory, Identifying the font types actually used on the web page; transmitting information indicating the identified font type to a server; and applying, to the web page, CSS (Cascading Style Sheets) that corresponds to the font type and includes font information stored as a static file, returned from the server.

6. A server including a processor and a memory, receiving information indicating font types used in a web page from a user terminal; A program for executing the steps of selecting CSS (Cascading Style Sheets) containing font information corresponding to the font type from multiple font information stored as static files based on the font type indicated by the received information, and returning the selected CSS to the user terminal.

7. A user terminal including a control unit and a storage unit, The control unit Identifying the font types actually used on the web page; a process of transmitting information indicating the identified font type to a server; and a user terminal that executes a process of applying to the web page CSS (Cascading Style Sheets) that corresponds to the font type and includes font information that has been stored as a static file and that has been returned from the server.

8. A server including a control unit and a storage unit, The control unit receiving information indicating the type of font used in the web page from the user terminal; A server that executes a process of selecting CSS (Cascading Style Sheets) including font information corresponding to the font type from multiple font information stored as static files based on the font type indicated by the received information, and returning the selected CSS to the user terminal.

9. A method executed by a system including a user terminal and a server capable of communicating with the user terminal via a network, a step of identifying font types actually used in a web page by the user terminal; a step of transmitting information indicating the identified font type to the server by the user terminal; the server selects, based on the received information indicating the font type, a CSS (Cascading Style Sheets) including font information corresponding to the font type from among a plurality of font information stored as static files, and returns the selected CSS to the user terminal; and the user terminal applies the returned CSS to the web page.

10. A system including a user terminal and a server capable of communicating with the user terminal via a network, The user terminal Identifying the font types used in the web page; transmitting information indicating the identified font type to the server; applying, to the web page, CSS (Cascading Style Sheets) that correspond to the font type and that include font information stored as a static file, which is returned from the server; The server receiving information indicating a font type from the user terminal; A system that executes a process of selecting a CSS containing font information corresponding to the font type from multiple font information stored as static files based on the font type indicated by the received information, and returning the selected CSS to the user terminal.

Images