“This is the 13th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

In my last article, I introduced TTF font files to solve the problem of inconsistent font representation across platforms.

But that’s not the best solution, because font files don’t just have TTF formats. Common font formats include OTF, WOFF, and WOFF2.

Today, I’m going to summarize the concepts related to the most common font formats so that you can make the best choices when you use them.

TTF (TrueType Font)

TrueType is a type standard developed by Apple and Microsoft for computer outline fonts.

The extension for this type of font file is.ttf and the type code is tfil.

TrueType’s main strength is that it gives developers advanced control over font display, pixel-level display of different font sizes, and so on.

The compatibility is as follows:

OTF (OpenType Font)

OpenType is a cross-platform font file format jointly developed by Adobe and Microsoft. It is also called Type 2 font. It adopts Unicode encoding and is a font format compatible with various languages.

OpenType is also an outline font that is more powerful than TrueType, supports multiple platforms, supports a large character set, and has copyright protection. It is a superset of Type 1 and TrueType.

The OpenType standard defines the OpenType file name extension:

  • The OpenType file suffix that contains the TrueType font is named.ttf.
  • The suffix name of the file that contains the PostScript font.OTF.
  • If it is a font package file containing a list of TrueType fonts, the suffix is named.TTC.

The main advantages of OTF are:

  1. Enhanced cross-platform functionality;
  2. Better support for the international character set as defined by the Unicode standard;
  3. Support advanced printing control capabilities;
  4. The resulting file size is smaller;
  5. Supports adding digital signatures to character sets to ensure file integration.

The same OpenType font file can be used for Mac OS, Windows and Linux. This cross-platform font library is very convenient for users to use, and users do not have to worry about the configuration of font libraries for different systems.

OTF has the same compatibility as TTF.

WOFF (Web Open Font Format)

Web open font format is a font format standard adopted by Web pages. This font format was developed in 2009 and is now being standardized by the Web Fonts Working Group of the World Wide Web Consortium with a view to becoming a recommended standard.

This font format not only makes effective use of compression to reduce file size, but also does not contain encryption and is DRM free.

WOFF essentially contains SFNt-based fonts (such as TrueType, OpenType, or open font formats) that have been compressed by WOFF’s coding tools for embedding in web pages. This font format is compressed using Zlib and the file size is typically 40% smaller than TTF.

The compatibility is as follows:

WOFF2

The WOFF 2 standard builds on WOFF1 and further optimizes volume compression, requires less bandwidth, and can be quickly decompressed on mobile devices.

Compared to the Flate compression used in WOFF 1.0, WOFF 2.0 uses the Brotli method for compression with higher compression rates, so the file size is smaller.

The compatibility is as follows:

Added concept

In the above concept, there are the terms Type 1 font and Type 2 font. I would like to supplement their related concepts here.

Type 1 font

Type 1 fonts were introduced by Adobe in 1984, used with its PostScript page description language, and became widely used with the availability of desktop publishing software and printers that could use PostScript. In 1996, Adobe product and text development began to focus on the more versatile OpenType fonts, with less focus on Type 1.

Type 2 font

Open Type fonts are also called Type 2 fonts. This name is also created to correspond to Type 1 fonts, indicating that they are further than Type 1.

conclusion

From the above concept, it can be seen that:

  • TTF is more compatible, but it has the largest font file size.
  • WOFF fonts have a smaller size and better performance than TTF fonts.
  • The WOFF 2 font is an upgrade to the WOFF font.

Therefore, if compatibility is not considered, WOFF 2 is preferred, which is why I said at the beginning of the article that using TTF is not the optimal solution, you can choose the appropriate font file according to your actual situation, in order to achieve the purpose of performance optimization.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!