自定义字体与样式HTML示例-优快云博客

本文通过一个具体的HTML示例介绍了如何在网页中引入并使用自定义字体，包括不同风格的文字显示效果，并设置了页面背景颜色。

 1 <!DOCTYPE HTML> 
 2 <meta charset="UTF-8"> 
 3 <head> 
 4 <script src="jquery-1.8.2.min.js"></script> 
 5 <style> 
 6 #gmap,#controls { 
 7 width:300px; 
 8 height:300px; 
 9 } 
10 @font-face { 
11 font-family: Lovelo-Black;/×定义font的名字×/ 
12 src: url('font/Lovelo Black.otf');/*把下载的字体文件引入进来×/ 
13 } 
14 @font-face { 
15 font-family: Lovelo; 
16 src: url('font/Lovelo Line Bold.otf'); 
17 } 
18 @font-face { 
19 font-family: HYPED; 
20 src: url('font/HYPED_Font.otf'); 
21 } 
22 div.a { 
23 font-family: Lovelo-Black, sans-serif; 
24 font-size:24px; 
25 } 
26 div.b { 
27 font-family: Lovelo, sans-serif; 
28 font-size:24px; 
29 } 
30 div.c { 
31 font-family: HYPED, sans-serif; 
32 font-size:24px; 
33 color:yellow; 
34 } 
35 body { 
36 background-color:rgb(216, 216, 216); 
37 } 
38 </style> 
39 <script> 
40 </script> 
41 </head> 
42 <body class="sapUiBody"> 
43 <div class="a">Hello World 123456</div> 
44 <div class="b">Hello World 123456</div> 
45 <div class="c">Hello World 123456</div> 
46 </body>