--- title: '@font-face' slug: Web/CSS/@font-face tags: - CSS - CSS Reference - CSS 參考 - Fonts - WOFF - 字型 translation_of: Web/CSS/@font-face ---
The @font-face
CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face
eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face
at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
{{seeCompatTable}}
@font-face { [font-family: <family-name>;]? [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]? [unicode-range: <urange>#;]? [font-variant: <font-variant>;]? [font-feature-settings: normal|<feature-tag-value>#;]? [font-stretch: <font-stretch>;]? [font-weight: <weight>]; [font-style: <style>]; }
<family-name>
<uri>
local("Font Name")
.<font-variant>
<font-stretch>
<weight>
<style>
You can specify a font on the user's local computer by name using the local()
syntax. If that font isn't found, other sources will be tried until one is found.
這個範例指定一個可供下載的字型,並套用至 document 的整個 body。
<html> <head> <title>Web Font Sample</title> <style type="text/css" media="screen, print"> @font-face { font-family: "Bitstream Vera Serif Bold"; src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); } body { font-family: "Bitstream Vera Serif Bold", serif } </style> </head> <body> This is Bitstream Vera Serif Bold. </body> </html>
這個範例會套用使用者本地的 "Helvetica Neue Bold" 字型,只有當使用者未安裝該字型(兩種名稱都試過了),才會下載 "MgOpenModernaBold.ttf" 字型:
@font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; }
規格文件 | 狀態 | 註解 |
---|---|---|
{{SpecName('WOFF1.0', '', 'WOFF font format')}} | {{Spec2('WOFF1.0')}} | 字型格式規格文件 |
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}} | {{Spec2('CSS3 Fonts')}} |