Related concepts of TTF, TOF, woff and woff2

Preface

In the last article , I introduced it TTF Format font file to solve the problem of inconsistent font performance on various platforms .

But that's not the best solution , Because the font file has more than TTF Format , Common font formats include OTF、WOFF and WOFF2 etc. .

today , Let me summarize some of the most common font formats , It is convenient to make the best choice in the future .

TTF（TrueType Font）

TrueType It is a computer outline font jointly developed by apple and Microsoft （ Curvilinear stroke words ） Type standard .

The extension of this type of font file is .ttf, Type code is tfil.

TrueType Its main strength is that it can provide developers with information about font display 、 Advanced control of pixel level display of different font sizes .

The compatibility is as follows ：

image-20220130224859429

OTF（OpenType Font）

OpenType yes Adobe and Microsoft Jointly developed cross platform font file format , Also called Type 2 typeface , Its font format is Unicode code , It is a font format compatible with various languages .

OpenType It is also an outline font , Than TrueType More powerful , It also supports multiple platforms , Support a large character set , And copyright protection . It can be said that it is Type 1 and TrueType Superset .

OpenType The standard defines OpenType The suffix of the file name ：

• contain TrueType The font OpenType File suffix .ttf.
• contain PostScript The file suffix of the font is .OTF.
• If it's a series of TrueType Font package file of font , Then the suffix is .TTC.

OTF The main advantages of ：

1. Enhanced cross platform functionality ;
2. Better support Unicode International character set defined by the standard ;
3. Support advanced printing control capability ;
4. The resulting file size is smaller ;
5. It supports adding digital signatures to character sets , Ensure the integration function of documents .

The same OpenType Font files can be used for Mac OS,Windows and Linux System , This cross platform font is very convenient for users , Users no longer have to worry about configuring word libraries for different systems .

OTF Compatibility and TTF identical .

WOFF（Web Open Font Format）

Web Open Font Format It's a font format standard for web pages . This font format was developed in 2009 year , It is now being developed by the World Wide Web Consortium Web Font working group standardization , In order to become a recommended standard .

This font format can not only effectively use compression to reduce file size , And it does not contain encryption and is not protected DRM（ Digital copyright management ） Limit .

WOFF In essence, it is based on sfnt The font of （ Such as TrueType、OpenType Or open font format ）, And these fonts have been WOFF Coding tool compression , So that it can be embedded in the web page . This font format uses zlib Compress , The file size is generally larger than TTF Small 40%.

The compatibility is as follows ：

image-20220130224605119

WOFF2

WOFF 2 Standard in WOFF1 On the basis of , The volume compression is further optimized , Less bandwidth requirements , At the same time, it can quickly decompress on the mobile device .

And WOFF 1.0 Used in Flate Compared to compression ,WOFF 2.0 It's using Brotli Method , Higher compression , So the file size is smaller .

The compatibility is as follows ：

image-20220130224713567

Add concept

In the above concept , There is Type 1 typeface and Type 2 typeface That's what I'm saying , Here I would like to add the related concepts of the two .

Type 1 typeface

Type 1 Font on 1984 Year by year Adobe introduce , With its PostScript Page description language , With the availability PostScript The popularity of desktop publishing software and printers has been widely used .1996 year ,Adobe Product and text development began to focus on more widely used OpenType typeface , Yes Type 1 The attention of .

image-20220130211511220

Type 2 typeface

Open Type The font is also called Type 2 typeface , In fact, this name is also used to correspond to Type 1 Font , Representation ratio Type 1 Further more .

summary

Through the above concept , It can be seen that ：

• TTF Better compatibility with , But its font file size is the largest .
• WOFF The font is better than TTF Fonts are smaller and more expressive .
• WOFF 2 The font is right WOFF Font upgrade .

therefore , If compatibility is not considered , Font usage first WOFF 2 , This is what I said at the beginning of the article TTF Not the best solution , You can according to your actual situation , Choose the appropriate font file as appropriate , To achieve the purpose of performance optimization .

~ The end of this paper , Thank you for reading ！