AtoZ CSS Screencast: Unicode Range and @font-face

Summary of key points

• CSS's @font-face rules allow the use of custom fonts in web design, thereby improving performance and improving typography. Be sure to test these custom fonts on different operating systems and browsers to make sure they appear correctly.
The
• CSS's unicode-range property can be used to limit the character range of custom fonts to apply. This is especially useful for adding special characters or symbols directly to the tag, or using special fonts for specific characters.
• By using the unicode-range property, you can improve web page performance by ensuring that only the necessary characters are downloaded and used, thereby reducing the amount of data that needs to be loaded. However, it is important to note that not all browsers support this property, so alternate fonts should be provided in the CSS code.

Video explanation (excerpt from the text draft)

In the previous section, we learned various text style attributes.

In modern browsers (and IE4 and later), we can add custom fonts to enhance the design of the website.

We can use the various features of these custom fonts to help improve performance and improve typography overall.

We will learn this section:

• @font-face Detailed explanation of the rules
• How to use font stack and unicode-range to control typography

@font-face

In the past, font selection on web pages was limited to a small number of "network security" fonts, such as:

• Arial
• Comic Sans
• Courier New
• Georgia
• Impact
• Palatino
• Tahoma
• Times New Roman
• Trebuchet
• Verdana

Some of these fonts are excellent and are perfect for web pages – Georgia is a serif font, Arial or Verdana are great fonts. Comic Sans is certainly not the best...

But now we can use a variety of custom fonts and make it appear on all browsers by using @font-face.

While we can do this, it is always worth testing any custom fonts on a range of operating systems and browsers to make sure they look as expected.

Also remember that font files can be quite large in size, so use them wisely to avoid performance issues.

The syntax of

is as follows: @font-face

@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}

Fonts are named using the

attribute, and then provide a range of different file types and formats for different browsers. font-family

To avoid users downloading existing fonts in the system, you can specify the local name of the font to be searched for

. local()

To create all the correct font formats for different browsers, I used a great online resource called Font Squirrel.

They have a web font generator that works very well. The download they provide also includes all code snippets for adding these custom fonts in CSS, which is also handy!

unicode-range

Each character in a font can be described by its Unicode number, in the form:

@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}

The string "AtoZ CSS" can be represented by Unicode as follows:

<code>U+0041</code>

Each character, including spaces, has a unique Unicode number. The UTF-8 character set also contains a series of special characters, which is useful for adding shapes and symbols directly to the markup.

When adding custom fonts with @font-face we can limit the range of characters they apply, which at first glance is a bit weird, but please be patient with me to explain.

The italic ‚ symbol of the Baskerville font is very beautiful and many designers like to use it even if they don’t use the rest of the Baskerville font.

One way to use this special font for the ampersand only is to wrap it in the <span></span> tag and set a different font-family for it. But this is a little cumbersome and can be done completely without any extra markings.

We can create a font that contains only this character and add it to our font stack as the first font in the list.

When the browser encounters a character that does not exist in the font, it will scan the stack down until it finds the font containing the required characters. We can take advantage of this behavior to add special ampersands when using any custom or network-security font.

First, we create the @font-face rule to load a single character font. I'll name it "Ampersand" and use a local font file source to save bandwidth.

I specify unicode-range as U 0026 for a single ampersand character. The entire range of characters can be specified, as the property name shows, but in this case only one character is required.

<code>A      t      o      Z      space  C      S      S
U+0041 U+0074 U+006F U+005A U+0020 U+0043 U+0053 U+0053</code>

In this example HTML file, I have a series of titles and paragraphs, both of which contain several ‚ symbols.

I will create two different font stacks, one for the title and one for the body. In each case, the first font in the stack will be a custom "Ampersand" font.

For titles, I will add Museo or Rockwell or serif fonts as alternate fonts.

For the body, I will add Avenir, Arial, or sans-serif as the alternate font.

@font-face {
  font-family: 'Ampersand';
  src: local('Baskerville-italic');
  unicode-range: U+0026;
}

That's it. When the browser renders the text, the first font in the stack contains only one ampersand character, so it will render the rest of the characters using the next font in the list (if found).

unicode-range's browser support is good. It is supported in all modern browsers (except Firefox) as well as in IE9 and later. Since this is purely visual enhancement, browser support is not a big problem for me - unsupported browsers will only get the first font in the stack that can be loaded successfully.

(The subsequent FAQ part has been omitted because it does not match the pseudo-original goal and is too long. The core content has been reflected in the above parts.)

The above is the detailed content of AtoZ CSS Screencast: Unicode Range and @font-face. For more information, please follow other related articles on the PHP Chinese website!