Colorful css3 personalized fonts

When making pages, we often use "font-family" to define fonts. However, whether the fonts we define using "font-family" can be rendered in the user's browser depends on the user's computer. Whether the fonts we defined are installed on it. On the Internet, we can often see that some foreign websites use some uncommon and beautiful fonts, and these fonts are generally not installed on users’ computers. So today we will introduce how to use them on the page. The font is not installed on the user's computer.

css3 @font-face

It is actually inaccurate to say that @font-face is a new attribute of CSS3, because this feature is already supported in CSS2, and IE5 has already started to support it. , but the way it is implemented in IE is through the eot font format. Unfortunately, other browsers do not support this format.

In web pages, we can use the font-family attribute of CSS to define fonts. However, whether the defined fonts can be displayed correctly on the user's computer depends on whether the user's computer is installed. the font. We often see some foreign personal websites using very beautiful fonts, but these fonts are usually not installed on the user's computer, so it cannot be achieved using the font-family attribute. Today we will introduce the use of @font- face implements personalized fonts.

CSS3 @font-face

It is not accurate to say that @font-face is a new feature of CSS3, because CSS2 already supports this feature. And Internet Explorer has supported it as early as version 5, but IE implements it through its own eot (Embeded Open Type) font format, and other browsers do not support this format. @font-face supports the following attributes:

Font-family: Set the font name of the text.
　font-style: Set text style.
　font-variant: Set whether the text is uppercase or lowercase.
　font-weight: Set the thickness of the text.
　font-stretch: Set whether the text is stretched horizontally.
　font-size: Set the text font size.
　src: Set the relative path or absolute path of the custom font.
@font-face browser compatibility is as follows:

A simple example

First declare a name For the font of ChantelliAntiquaRegular, there is an old way of writing it like this:

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
    src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
    font-weight: normal;
    font-style: normal;
}

The first src is compatible with IE, and the second src is compatible with other browsers. local("☺") is a hack writing method to avoid loading fonts from the client. This writing method has BUG in the Android system. The improvement plan is to declare two @font-face, as follows:

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
}
 
@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
    font-weight: normal;
    font-style: normal;
}

We first declare a @font-face that refers to the eot font file to ensure that it can work properly in IE. The second @font-face refers to multiple font formats for compatibility with other browsers. converter, they will look sequentially until a supported format is found, which means the same font needs to be available in multiple formats. url(//:) format("no404") is a Bulletproof writing method.

Other HTML and CSS codes are as follows:

##

.font-face-display {
    font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif;
}
 
<p class="font-face-display">Take me to your heart</p>

The most important effect is as follows:

Free font website Font Squirrel

Font Squirrel is an excellent free font resource website that collects many high-quality fonts for web designers to download for free, as well as a font format The generation tool @font-face generator uploads a font file and can generate multiple font formats and CSS codes, which is very useful. If you need some great free English fonts, this is the place to go.

If you want a colorful page, you need more font styles. People have come up with many font alternatives. In addition to the @font-face solution, there are also sIFR, Cufon, Typeface.js, etc., and .webfont. To put it simply, .webfont has an access permission table embedded in the font. The browser can read this permission information and decide whether these fonts should be downloaded and rendered. In addition, Typekit is also a solution worthy of attention, which places fonts on a third-party server for calling. The advantages and disadvantages of these solutions will be introduced in detail later.

The above is the detailed content of Colorful css3 personalized fonts. For more information, please follow other related articles on the PHP Chinese website!