服务器字体的应用

Posted 2021-01-30 静心*尽力

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了服务器字体的应用相关的知识，希望对你有一定的参考价值。

一.代码示例

 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>