如何使用Web字體？

如何使用Web字體

嵌入Web字體的關鍵是@font-face規則，經過它能夠指定瀏覽器下載web字體的地址，以及如何在樣式表中引用該字體

@font-face {
    font-family: Vollkorn;
    font-weight: bold;
    font-style: italic;
    src: url("fonts/vollkorn/vollkorn-bold-italic.woff") format('woff');
}

h1 {
    font-family: Vollkorn, Georgia, serif;
}

爲了解決瀏覽器對字體格式的兼容性問題，能夠在@font-face中聲明多個src值，這些src都是不一樣類型的字體
如：

@font-face {
    font-family: Vollkorn;
    font-weight: bold;
    src:  url("fonts/vollkorn/vollkorn-bold.eot#?ie") format("embedded-opentype"),
            url("fonts/vollkorn/vollkorn-bold.woff") format('woff'),
            url("fonts/vollkorn/vollkorn-bold.ttf") format("turetype"),
            url("fonts/vollkorn/vollkorn-bold.svg") format("svg"),
            url("fonts/vollkorn/vollkorn-bold.woff2") format("woff2"),

}

h1 {
    font-family: Vollkorn, Georgia, serif;
}

現代瀏覽器都支持woff和woff2字體。

注意

在@font-face中的聲明，他們的值是爲了告訴瀏覽器何時能使用這個特定的字體文件，而不是讓字體應用這些聲明。

資源

1. 免費字體資源：google fonts

2. Font Squirrel