HTML中字体和字体图标的应用
?1.字體應用
? ? ? ? HTML中應用字體要用到font-fanily屬性，定義一個名字，把要用到的字體.ttf格式下載到本地，用src屬性使用字體。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字體的應用</title><style>@font-face {font-family:my font; /*設置字體*/src: url(./方正硬筆行書簡體.ttf); /*字體的鏈接*/}p{font-family: my font; /*屬性值與上一個一致*/font-size:50px; /*設置字體大小*/ }</style> </head> <body><p>你好世界！</p> </body> </html>預覽：
?
關于字體的其他屬性：
font-style? ? ? ? ? ? ? ?用于打開和關閉斜體
? ? ? ? normal? ? ? ? ?【默認】正常字體，關閉斜體
? ? ? ? italic? ? ? ? ? ? ? 斜體
? ? ? ? oblique? ? ? ? ? 模擬斜體
font-weight? ? ? ? ? ? 控制字體的粗細程度
? ? ? ? normal? ? ? ? ??【默認】正常,400
? ? ? ? bold? ? ? ? ? ? ? ?加粗字體,700
? ? ? ? lighter? ? ? ? ? ? 設置當前元素字體比父元素更細
? ? ? ? bolder? ? ? ? ? ? 設置當前元素字體比父元素更粗
? ? ? ? 100–900? ? ? ? 數值類型的粗細程度（值越大字體越粗）?
text-align? ? ? ? ? ? ? ?文本的排列方式
? ? ? ? left? ? ? ? ? ? ? ? ?左對齊
? ? ? ? center? ? ? ? ? ? 居中
? ? ? ? right? ? ? ? ? ? ? ?右對齊
text-transform? ? ? ? 允許字體改變，文本變形
? ? ? ? ?none? ? ? ? ? ? ?防止任何改變
? ? ? ? ?uppercase? ? 將文本轉換為大寫
? ? ? ? ?lowercase? ? ?將文本轉換為小寫
? ? ? ? ?capitalize? ? ? 將所有單詞第一個字母轉換為大寫
? ? ? ? ?full-width? ? ? ?轉換為類似于一個等寬字體
text-decoration? ? ? 設置或者取消文本修飾
? ? ? ? ? 速寫屬性 ?line style color
?2.字體圖標的應用
HTML中應用字體圖標來自字體圖標庫：iconfont-阿里巴巴矢量圖標庫
?常用方法一：
1.選中一個圖標，加入到購物車，點進購物車，添加到項目（若沒有就新建一個），然后點擊確定。
?2.點擊unicde，查看在線鏈接。
?3.點擊更新代碼，復制代碼。
?4.粘貼到html中head標簽里，style屬性中，url里的鏈接注意要加https:
復制籃球下面的代碼粘貼到body標簽里的span標簽里
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字體的應用</title><style>@font-face {font-family: 'iconfont'; /* Project id 2721190 */src: url('https://at.alicdn.com/t/font_2721190_fg07hn218k.woff2?t=1629447137820') format('woff2'), /*url中的鏈接，在//前面要加https:*/url('https://at.alicdn.com/t/font_2721190_fg07hn218k.woff?t=1629447137820') format('woff'),url('https://at.alicdn.com/t/font_2721190_fg07hn218k.ttf?t=1629447137820') format('truetype');}.iconfont{font-family: iconfont; /*與上面的font-family名字一致*/color:red; /*賦予顏色*/font-size: 50px;} /*字體大小*/</style> </head> <body><span class='iconfont'></span> /*class屬性名可以更改*/ </body> </html>預覽：
?常用方法二：
步驟1同上。
2.點擊font class，查看在線鏈接，復制代碼。
3.粘貼到html的head標簽中，用link標簽引入，url的連接中注意加https:
將籃球下面的代碼復制到body中的sapn標簽里的class屬性中?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字體的應用</title><link rel="stylesheet" href="https://at.alicdn.com/t/font_2721190_fg07hn218k.css"> </head> <body><span class="iconfont icon-lanqiu"></span> /*class屬性名中iconfont不變，icon-lanqiu是圖標的代碼*/ </body> </html>預覽：
?
總結
以上是生活随笔為你收集整理的HTML中字体和字体图标的应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Qt中怎样实现延时
- 下一篇： 某某行政处罚文书网 (请求参数: cip