xfl

xl-fontload

Chinese font networking. Cut the font according to the word frequency and perform lazy loading through the front end. No backend program support is required.

• Word-frequency file (word-frequency.csv) Demonstration file source: Ministry of Education
• Lists the conversion fonts. Places in the fonts/ directory, with an unconventional structure. Automatically searches for all .ttf ending archives.
• For each font:
  • List all supported characters
  • Among them, five hundred characters, punctuation marks, English letters, numbers, etc. are commonly used as the first font file.
  • Next, if the remaining characters appear in the word frequency table, a character file will be formed according to each hundred characters of the word frequency.
  • The remaining uncorrelated characters are formed into a font file for each hundred characters.
  • All font files are placed in the same directory, and the file names are separated by numbers.
  • Output word code/font file number correspondence table for quick checking of front-end.

Usage / Compiler

• This project uses nodejs. Please first install nodejs and npm, and use npm install to build the node_modules directory. Reference instructions:

   curl -sL https://deb.nodesource.com/setup_8.x | sudo bash -
  npm install
  

• Organize the fonts you want to convert into the fonts/ directory, with the directory structure unrestricted. The program will automatically scan out all font files.

  • Currently, only ttf is eaten~ chilly.

• Prepare font file word-frequency.csv

• Execute the converter compile.sh

• Font file is output in the assets/ directory.

Usage / Frontend

Basic usage method:

 xfl.load("http://path/to/scattered/font/folder/", options, function(font) {
    font.sync(stringToDisplay);
})

Examples of dynamically loading fonts based on instant content:

 /* assume we have "textarea" variable to be an input box accepting user input */
xfl.load("http://path/to/scattered/font/folder/", options, function(font) {
   textarea.addEventListener("keyup", function() {
     font.sync(textarea.value);
   });
})

If you do not plan to do your own font file, you can use a set of font files we prepared through Github Pages. The location of the project library is here. If you want to use it, you can use this website: http://plotdb.github.io/xl-fontset/alpha/<font name>, for example:

 xfl.load("http://plotdb.github.io/xl-fontset/alpha/瀨戶字体", function(font) { ...

Please change "<font name>" to the font you want to use. A list of currently supported fonts can be found here, including Wang Hanzong 42 fonts, stone carvings, station cool, cwText-Q, Seto fonts, etc., a total of 57 fonts.

It should be noted that there are still some problems when converting fonts, which may lead to missing characters in some fonts. In addition, not all fonts contain complete Chinese characters, please use them at your own discretion.

Options:

• fontName - name used in font-family. default to be the basename of URL.
• (TBD) text - preload files that contain text in this option.

Future direction

• Transmission optimization (Optimization)
  • Taking into account character correlation, character space can be created through mochi and specific corpus, and grouping related characters as the basis for font cutting through clustering algorithm (such as K-means clustering), thereby reducing the number of files that need to be loaded.
  • Further optimize file size.
  • Provide nginx and apache file modules, allowing browsers to obtain necessary files through a single HTTP Request (for example, GET https://path/to/font/1+2+3+4)
• Quality issues (Quality)
  • The missing word part can be used to generate online learning using adversarial style and automatically fill it in.
  • The above-mentioned adversarial generation network can also be used to assist in the generation of new fonts.
• other
  • Set parameterization, and when creating font files, you can customize the font set according to your needs by setting.
• Google Font has implemented similar techniques to load Chinese fonts. See:
  • https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
  • Example CSS:
    • https://fonts.googleapis.com/css?family=Zhi-Mang-Xing&display=swap

LICENSE

• Font Files: All curated font files are separately placed in another repo (xl-fontset) and are either GPL or SIL-OFL Licensed. (OK for Commercial Use)
• Source codes are released under MIT License.