Background:

Because the project have graffiti synchronization function (such as draw a straight line on the computer Need to put the line synchronization to various side) so need to make sure that the h5 content area are consistent in all sorts of equipment As is known to all Font on different equipment platform Support degree is not the same So you first need to understand the problem, the font support.

Font format support:

TureTpe(.ttF) format:

The.ttf font is the most common font for Windows and Mac. It is a RAW format, so it is not optimized for websites. Browsers that support this font have: IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+

OpenType(.otF) format:

The.OTF font is considered a primitive font format that is built into TureType, so it provides additional functionality. Browsers that support this font include: Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+

Web Open Font Format(.woff)

The.woff font is one of the best fonts on the Web. It is a compressed version of open TrueType/OpenType that also supports meta packet separation. Browsers that support this font include: 【 ie 9 +, Firefox3.5 +, chrome 6 +, Safari3.6 +, Opera11.1 + 】

Embedded Open Type(.eOT)

Eot fonts are IE specific fonts and can be created from TrueType. Browsers that support this font have IE4+

SVG(.svg) format:

. SVG font is a format based on the SVG font, which is supported by Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+.

Solution:

  1. In @font-face we need the above five font formats to support more browsing versions. I know the font tool conversion url:

    1. https://transfonter.org/
    2. https://www.fontsquirrel.com/tools/webfont-generator

    Advantages: Not dependent on third parties. Disadvantages: Large font pack resources.

  2. Use webFONT Chinese solution to unify various end fonts.

    Advantages: Dynamically generate the required font package, font resources occupy little. Cons: Reliance on third parties.

Webfont:

Webfont solutions currently available in China:

  1. Youfont: Youfont is the world’s first Chinese WebFont service platform.
  2. Ali Mom: The WebFont service platform of Ali Group.
  3. Is the word: a traditional Chinese WebFont service platform in Taiwan.
  4. FontSpider: a Chinese font compressor that makes it possible to freely introduce Chinese fonts into web pages. Hopefully there will be more and better Chinese WebFont solutions in the future. Is a traditional Chinese WebFont service platform in Taiwan.

References:

  1. https://transfonter.org/formats