CODEWITHSUNDEEP
htmlpdftextfontsbrowser
P5music
P5music

Reputation: 3337

Text/Font rendering in Web browsers. How is it achieved?

Premise: I know that PDF text is rendered by means of a C library that understands fonts and is able to render them in graphical form. For example, open-source PDF libraries (like poppler or mupdf) rely on freetype2, which is responsible to render the fonts. Question: I would like to know which method is used in HTML Web browsers to render text and fonts.

Upvotes: 1

Views: 1509

Answers (1)

Seth Flowers
Seth Flowers

Reputation: 9190

PDF's typically include everything necessary in order to render the document, including fonts. According to wikipedia

Portable Document Format (PDF) is a file format used to represent documents in a manner independent of application software, hardware, and operating systems.[2] Each PDF file encapsulates a complete description of a fixed-layout flat document, including the text, fonts, graphics, and other information needed to display it.

Browsers typically (hopefully) follow standards defined by the W3C. For instance, in http://www.w3.org/TR/css3-fonts/, we have the following:

Font resources may be local, installed on the system on which a user agent is running, or downloadable. For local font resources descriptive information can be obtained directly from the font resource. For downloadable font resources (sometimes referred to as web fonts), the descriptive information is included with the reference to the font resource. Families of fonts typically don't contain a single face for each possible variation of font properties. The CSS font selection mechanism describes how to match a given set of CSS font properties to a given font face.

If you really want to dig into the guts of how browsers render fonts, become familiar with http://www.w3.org/TR/css3-fonts/.

So, CSS provides the web-designer the ability to specify a prioritization of what fonts to use. For instance, the W3C provides the following example:

body { 
    font-family: Helvetica, Verdana, sans-serif; 
}

If Helvetica is available it will be used when rendering. If neither Helvetica nor Verdana is present, then the user-agent-defined sans serif font will be used.

Upvotes: 1

Related Questions