服务器字体的应用

一.代码示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>服务器字体</title>
 6     <style type="text/css">
 7      @font-face {
 8     font-family: '揣手手';
 9     src: url('tribal_animals_tattoo_designs-webfont.eot');
10     src: url('tribal_animals_tattoo_designs-webfont.eot?#iefix') format('embedded-opentype'),
11          url('tribal_animals_tattoo_designs-webfont.woff2') format('woff2'),
12          url('tribal_animals_tattoo_designs-webfont.woff') format('woff'),
13          url('tribal_animals_tattoo_designs-webfont.ttf') format('truetype'),
14          url('tribal_animals_tattoo_designs-webfont.svg#tribal_animals_tattoo_desigRg') format('svg');
15     font-weight: normal;
16     font-style: normal;
17 }
18     div{
19         font-family: '揣手手';
20         font-size: 100px;
21         text-align: center;
22     }
23     </style>
24 </head>
25 <body>
26     <!-- 
27        一.自定义字体书写格式:
28          @font-face{
29              font-family:"自定义字体名";
30              src:url("字体图片的路径地址"),
31                  url("字体图片的路径地址"),
32                  url("字体图片的路径地址")；
33              font-weight:;
34              font-style:;
35      字体格式:
36          .ttf
37          .otf
38          .woff
39          .eot
40          .svg
41      二.http://www.dafont.com/ 找字体的网站
42      http://www.fontsquirrel.com/tools/webfont-generator 修改字体图片格式的线上工具
43         }
44      三.服务器字体对照格式
45      @font-face {
46     font-family: 'tribal_animals_tattoo_desigRg';
47     src: url('tribal_animals_tattoo_designs-webfont.eot');
48     src: url('tribal_animals_tattoo_designs-webfont.eot?#iefix') format('embedded-opentype'),
49          url('tribal_animals_tattoo_designs-webfont.woff2') format('woff2'),
50          url('tribal_animals_tattoo_designs-webfont.woff') format('woff'),
51          url('tribal_animals_tattoo_designs-webfont.ttf') format('truetype'),
52          url('tribal_animals_tattoo_designs-webfont.svg#tribal_animals_tattoo_desigRg') format('svg');
53     font-weight: normal;
54     font-style: normal;
55 }
56      -->
57      <div>
58          果子敲击可爱
59          abcdefg12345
60      </div>
61 </body>
62 </html>