我想在主 css 文件的@font-face 元素中加载多个@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";
}
最佳答案
此解决方案是跨浏览器的并且适用于本地字体:
@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");
}
您可以添加其他字体,但要注意页面加载时间。
关于css - 多个@Font-Face,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15107209/