css - 使用 Google 字体 CDN 时使用后备字体

Question

我可以同时使用网络字体和谷歌字体 API(如果用户阻止了谷歌字体 CDN)吗？即，

@font-face {
    font-family: "SourceCodePro-Bold";
    src: url(../fonts/SourceCodePro-Bold.ttf);
}

h1{ font-family: "SourceCodePro-Bold";}

和

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,400italic' rel='stylesheet' type='text/css'>

Answer 1

与任何字体系列回退相同。为 font-family 使用逗号分隔的字体列表。

确保您的本地字体与 Google 字体的名称不同。

<link rel='stylesheet' href='http://fonts.googleapis.com/...' />

<style type='text/css'>
* {
    font-family: 'Google Font', 'back up local', sans-serif;
}
</style>