Current location - Health Preservation Learning Network - Slimming men and women - Font format guide: TTF, OTF, WOFF, EOT and SVG
Font format guide: TTF, OTF, WOFF, EOT and SVG
There are many options for EOT, TTF, WOFF, SVG, WOFF2 ... font formats, but none of them are suitable for all browsers. This means that we must use multiple font formats to provide a consistent experience.

Now, let's review some basic knowledge and take a closer look at the different font formats used on the Internet.

TrueType font format was developed by Apple and Microsoft as a response to PostScript font format. TTF has long been the most common font format on Mac and Windows operating systems. All major browsers support it. However, IE8 does not support TTF;; Starting with IE9, it is only partially supported because the font must be set to "installable".

TTF allows the most basic type of digital rights management-an embeddable sign, which specifies whether the author is allowed to embed font files in PDF files and websites. Some tools allow you to modify this flag, which is one of the main problems of TTF format. Another disadvantage is that TTF/OTF fonts are not compressed, so their files are relatively large.

OpenType is the evolution of TTF. This is the result of the joint efforts of Adobe and Microsoft. OpenType fonts contain screen and printer font data in one component. OTF has several unique functions, including supporting multi-platform and extended character set. OTF fonts can be used on Macintosh and Windows operating systems.

OTF also allows storage of up to 65,000 characters. This extra space gives designers the freedom to include extra components, such as lowercase letters, old graphics, spare characters and other extra characters, which had to be distributed as separate fonts before.

EOT font is a font designed by Microsoft for the Internet. This is an attempt to solve the copyright defects of TTF and OTF when they are published on the Internet. EOT uses Microsoft tools to create fonts from existing TTF/OTF fonts. Compression and subsetting make font files smaller. Subset provides some copyright protection, but EOT also uses encryption for further protection. Does this sound promising? Yes, but EOT format is only supported by Internet Explorer.

WOFF essentially contains SFNT-based fonts (such as TrueType, OpenType or other open font formats), which are compressed by WOFF's coding tools and embedded in web pages. This is the result of cooperation between Mozilla Foundation, Microsoft and Opera software. Because fonts are compressed, they load faster. Metadata allows license data to be included in font files to solve copyright problems. This is a proposal of the World Wide Web Consortium, which is obviously the future of font format.

WOFF2 is the next generation of WOFF. Compared with the original WOFF, the average compression gain of WOFF2 format is 30%. As it is still only a suggested upgrade, it is not widely supported by WOFF.

SVG fonts are defined using the "font" element of SVG. These fonts contain glyph outlines as standard SVG elements and attributes as if they were a single vector object in an SVG image. The biggest drawback of SVG fonts is the lack of font hints. Font hints are embedded extra information that can present small fonts with quality and readability. Besides, SVG is not suitable for text. Because you can't select text on Safari, Safari Mobile and Chrome, you can't select individual characters, words or any custom options. You can only select an entire text line or paragraph.

However, if your target is iPhone and iPad users, SVG fonts are your only choice. This is the only file format allowed by Safari browsers of iOS 4. 1 and below.

As you can see, there are many factors that may affect the rendering of web fonts. In order to ensure quality and consistency, it is necessary to test all possible combinations of operating systems and browsers.