如何使用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