fengchuanyu 1 month ago
parent
commit
935f36fd26
1 changed files with 57 additions and 0 deletions
  1. 57 0
      2_CSS/32_iconfont.html

+ 57 - 0
2_CSS/32_iconfont.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* font-face 引入字体 */
+        @font-face {
+            /* 引入的字体名称 */
+            font-family: "iconfont";
+            /* Project id 5060986 */
+            /* 字体文件地址 */
+            src: url('https://at.alicdn.com/t/c/font_5060986_6o3jugyk9qc.woff2?t=1762667239058') format('woff2'),
+                url('https://at.alicdn.com/t/c/font_5060986_6o3jugyk9qc.woff?t=1762667239058') format('woff'),
+                url('https://at.alicdn.com/t/c/font_5060986_6o3jugyk9qc.ttf?t=1762667239058') format('truetype');
+        }
+
+        /* 可以理解为一个工具类 ,谁想使用这个字体图标,就给谁添加这个类名 */
+        .iconfont {
+            /* 使用的字体名称 */
+            font-family: "iconfont" !important;
+            font-size: 16px;
+            /* 字体样式  normal 以正常的文字效果展示*/
+            font-style: normal;
+            /* 开启字体平滑渲染 */
+            /* -webkit- 内核 常见的有 chrome safari */
+            -webkit-font-smoothing: antialiased;
+            /* -moz- 内核 常见的有 firefox */
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        .icon-attachment:before {
+            content: "\e6a9";
+        }
+
+        .icon-tupian:before {
+            content: "\e621";
+        }
+
+        .icon-yuyin:before {
+            content: "\e8c0";
+        }
+        .text1{
+            color: blue;
+            font-size: 100px;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <i class="text1 iconfont icon-yuyin"></i>
+</body>
+
+</html>