In many projects, some special fonts are used, but these fonts are not owned by everyone. When a user's system font library does not contain the font you set in advance, this will greatly reduce your webpage effect. Cropping is one of the solutions. When you encounter a situation as shown in, it is clear that cropping is not the best solution.
Let's take a look at Gu Jie's webpage. Their navigation adopts the image cutting method, and his background is a large image. When the network speed is slow, the following picture will appear, this makes people think that it is not harmonious. In view of this, CSS custom fonts can play their advantages in some situations. Next I will explain how to implement it: 1. prepare your font, preferably. TTF, because. TTF can be directly called by chrome and ff3.0 + of later versions. (currently, no information is found, so you can call it directly in CSS. fon ). 2. Prepare the software for converting. TTF to. EOT. I have found two types for the moment: Microsoft Weft And Ttf2eot (A command line) Program ). According to my experience, Microsoft
Weft is a graphical software, but it will fail to convert and compress the Chinese font (in fact, it is not an error, but it cannot be converted). Therefore, if you want to convert the Chinese font, you need to use ttf2eot. Ttf2eot is easy to use: Put the font file and the program in the same directory, and then run ttf2eot <***. TTF> ***. EOT in cmd. 3. Copy the two files to your project folder and enter the following in the CSS file: Code , You can display your font in all the mainstream:
@ Font-face {font-family: 'yahei'; SRC: URL (../images/msyh. TTF); font-style: normal; font-weight: normal}
@ Font-face {font-family: 'yahei'; SRC: URL (../images/msyh. EOT );}
* {Margin: 0; font-family: 'yahei ';}
Code explanation: font-family: font name, Src: path, font-style, and font-weight can be left empty, depending on your needs; the first line is for FF, chrome, opera, and Safari browsers, and the second line is for IE. After my test, if the first and second rows are under the same CSS file, FF will become invalid. Therefore, we should create a new CSS file, write the second row, and then use<! -- [If IE]> <LINK rel = "stylesheet"
Href = "ie.css" type = "text/CSS"/> <! [Endif] -->To solve this problem. In this case, the task is completed! However, every coin has two sides, I have summarized the advantages and disadvantages of embedding any font in CSS: Advantage: For an English website, this is a good method. Because there are only 26 letters in English, the font size is limited. Therefore, if your project is an English website, you can also make an English logo or navigation. This is a good method, because without images, You can greatly increase your browsing speed. Disadvantages: if it is a Chinese website, it is not recommended because the Chinese font is large and 10 m-20 m + is normal, which is very unfavorable for the user experience; of course, you can also get a software (font creator program) to make the TTF file back, so that you can modify the size of the library. However, if only a small number of Chinese fonts are involved, this is also a good method. After all, there is no image.
