1

メインのcssファイルのプロジェクト@font-faceに複数の@font-faceをロードしたいと思います。ファイルをダウンロードしましたが、Webページにロードされていません。ローカルファイルに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";
}
4

1 に答える 1

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");
}

他のフォントを追加することもできますが、ページの読み込み時間に注意してください。

于 2013-02-27T08:25:24.987 に答える