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