Multiple @ Font-Face

Question

我想在項目@ font-face中的一個主css文件中加載多個@ font-face。我下載了woff文件，但它們並未加載到網頁中。如何使用font-face作爲本地文件？

@font-face { 
    font-family: 'Ubuntu'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('../Fonts/font1.woff'); 
    src: local('☺'), 
    url('font1.woff') format('woff'); 
} 
@font-face { 
    font-family: 'Ubuntu'; 
    font-style: normal; 
    font-weight: 700; 
    src: "../Fonts/font2.woff"; 
} 

Answer 1

該解決方案是跨瀏覽器，並與當地的字體作品：

@font-face { 
    font-family: "Exo"; 
    font-style: normal; 
    font-weight: 400; 
    src: url("/font/exo/Exo-Regular-webfont.eot?#iefix") format("embedded-opentype"), 
     url("/font/exo/Exo-Regular-webfont.woff") format("woff"), 
     url("/font/exo/Exo-Regular-webfont.ttf") format("truetype"), 
     url("/font/exo/Exo-Regular-webfont.eot"), local("Exo-Regular"), 
     url("/font/exo/Exo-Regular-webfont.svg#ExoRegular") format("svg"); 
} 

@font-face { 
    font-family: "Exo"; 
    font-style: normal; 
    font-weight: 700; 
    src: url("/font/exo/Exo-DemiBold-webfont.eot?#iefix") format("embedded-opentype"), 
    url("/font/exo/Exo-DemiBold-webfont.woff") format("woff"), 
    url("/font/exo/Exo-DemiBold-webfont.ttf") format("truetype"), 
    url("/font/exo/Exo-DemiBold-webfont.eot"), local("Exo-Bold"), 
    url("/font/exo/Exo-DemiBold-webfont.svg#ExoDemiBold") format("svg"); 
} 

您可以添加其他字體，但留意網頁的加載時間。