字体图片的设置
1.字体图片的优点:简单来说就是一张图片,但是可以设置图片的大小和颜色,因此有了字体的功能。
2. 先在网上下载好字体图片形成压缩包,然后在现在好的压缩包里面的font放到当前项目文件夹中。
3.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> @font-face { /*声明字体,引用字体*/ font-family: 'icomoon'; /*我们自己起的名字*/ src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-style: normal; /*倾斜字体正常*/ } span{ font-family: "icomoon"; /*给盒子使用字体*/ font-size: 150px; color: red; } </style> </head> <body> <span></span> </body> </html>
4.效果:
5.获取字体图片的链接:
https://icomoon.io/app/#/select