@font-face详细用法+实例——Web响应式前端学习笔记
生活随笔
收集整理的這篇文章主要介紹了
@font-face详细用法+实例——Web响应式前端学习笔记
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
@font-face是CSS3的新特性，用于定義服務(wù)器字體。通過(guò)@font-face規(guī)則，開(kāi)發(fā)者便可以使用用戶計(jì)算機(jī)未安裝的字體。
語(yǔ)法格式
@font-face規(guī)則的語(yǔ)法格式如下所示。
@font-face {font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}YourWebFontName：自定義的字體名稱(chēng)，最好是使用下載的默認(rèn)字體（下載回來(lái)的叫什么字體，這里就填什么字體名）。
source：此值指的是自定義的字體的存放路徑，可以是相對(duì)路徑也可以是絕對(duì)路徑。
format：此值指的是自定義的字體的格式，主要用來(lái)幫助瀏覽器識(shí)別，其值主要有以下幾種類(lèi)型：truetype、opentype、truetype-aat、embedded-opentype、svg等；
應(yīng)用實(shí)例
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>@font-face用法</title> </head> <style> @font-face {font-family: myFont;src:url('fonts/demo2-1/書(shū)法.ttf'); }div{font-family: myFont;font-size: 4em;} </style> <body> <div>使用@font-face，應(yīng)用漂亮的Web字體 </div> </body> </html>總結(jié)
以上是生活随笔為你收集整理的@font-face详细用法+实例——Web响应式前端学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： CSS浮动、定位与z-index层叠等级
- 下一篇： 详解CSS三大特性之层叠性、继承性和重要