1

しばらく使用@font-faceしていますが、ファイルをオンラインで表示する際に問題は発生していません。しかし、@font-face地元で働いたことはありません。

地元で仕事ができない理由がわかりません@font-face。開発には Visual Studio 2012 Ultimate を使用しています。

CSS:

/* Include Fonts */
@font-face {
    font-family: 'SansationRegular';
    src: url('/Shared/Assets/Fonts/Sansation_Regular-webfont.eot');
    src: url('/Shared/Assets/Fonts/Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Shared/Assets/Fonts/Sansation_Regular-webfont.woff') format('woff'),
         url('/Shared/Assets/Fonts/Sansation_Regular-webfont.ttf') format('truetype'),
         url('/Shared/Assets/Fonts/Sansation_Regular-webfont.svg#SansationRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationLight';
    src: url('/Shared/Assets/Fonts/Sansation_Light-webfont.eot');
    src: url('/Shared/Assets/Fonts/Sansation_Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Shared/Assets/Fonts/Sansation_Light-webfont.woff') format('woff'),
         url('/Shared/Assets/Fonts/Sansation_Light-webfont.ttf') format('truetype'),
         url('/Shared/Assets/Fonts/Sansation_Light-webfont.svg#SansationLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationBold';
    src: url('/Shared/Assets/Fonts/Sansation_Bold-webfont.eot');
    src: url('/Shared/Assets/Fonts/Sansation_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Shared/Assets/Fonts/Sansation_Bold-webfont.woff') format('woff'),
         url('/Shared/Assets/Fonts/Sansation_Bold-webfont.ttf') format('truetype'),
         url('/Shared/Assets/Fonts/Sansation_Bold-webfont.svg#SansationBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationLightLightItalic';
    src: url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.eot');
    src: url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.woff') format('woff'),
         url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.ttf') format('truetype'),
         url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.svg#SansationLightLightItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationItalic';
    src: url('/Shared/Assets/Fonts/Sansation_Italic-webfont.eot');
    src: url('/Shared/Assets/Fonts/Sansation_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Shared/Assets/Fonts/Sansation_Italic-webfont.woff') format('woff'),
         url('/Shared/Assets/Fonts/Sansation_Italic-webfont.ttf') format('truetype'),
         url('/Shared/Assets/Fonts/Sansation_Italic-webfont.svg#SansationItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationBoldItalic';
    src: url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.eot');
    src: url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.woff') format('woff'),
         url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.ttf') format('truetype'),
         url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.svg#SansationBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Set Fonts */
a, p, li, text, label, input, submit, textarea/* DEPRECATED:, #PositionPayRange*/ {
    font-family: 'SansationLight';
}

h1, h2, h3, h4, h5, h6, .PositionPayRange {
    font-family: 'SansationBold';
}

/* Font sizing */
a, p, li, label {
    font-size: small;

}

/* Set Font Colors */
a, p, li, text, label, input {
    color: #111111;
}

h1, h2, h3, h4, h5, h6 {
    color: #444444;
}

サーバー上では完全に正常に動作するが、ローカルでは動作しない理由を誰か説明してもらえますか?

使用しているブラウザーやブラウザーのバージョンは関係ありません。同じ結果です。

編集：

私のディレクトリ構造は次のとおりです。

root/
   Shared/
      Assets/
         Fonts/
            *fonts are in here.*
         CSS/
            * css files are in here. *
   Home.cshtml
4

2 に答える 2

3

これは、現在のディレクトリ構造で機能するはずです。

@font-face {
    font-family: 'SansationRegular';
    src: url('../Fonts/Sansation_Regular-webfont.eot');
    src: url('../Fonts/Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Sansation_Regular-webfont.woff') format('woff'),
         url('../Fonts/Sansation_Regular-webfont.ttf') format('truetype'),
         url('../Fonts/Sansation_Regular-webfont.svg#SansationRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationLight';
    src: url('../Fonts/Sansation_Light-webfont.eot');
    src: url('../Fonts/Sansation_Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Sansation_Light-webfont.woff') format('woff'),
         url('../Fonts/Sansation_Light-webfont.ttf') format('truetype'),
         url('../Fonts/Sansation_Light-webfont.svg#SansationLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationBold';
    src: url('../Fonts/Sansation_Bold-webfont.eot');
    src: url('../Fonts/Sansation_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Sansation_Bold-webfont.woff') format('woff'),
         url('../Fonts/Sansation_Bold-webfont.ttf') format('truetype'),
         url('../Fonts/Sansation_Bold-webfont.svg#SansationBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationLightLightItalic';
    src: url('../Fonts/Sansation_Light_Italic-webfont.eot');
    src: url('../Fonts/Sansation_Light_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Sansation_Light_Italic-webfont.woff') format('woff'),
         url('../Fonts/Sansation_Light_Italic-webfont.ttf') format('truetype'),
         url('../Fonts/Sansation_Light_Italic-webfont.svg#SansationLightLightItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationItalic';
    src: url('../Fonts/Sansation_Italic-webfont.eot');
    src: url('../Fonts/Sansation_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Sansation_Italic-webfont.woff') format('woff'),
         url('../Fonts/Sansation_Italic-webfont.ttf') format('truetype'),
         url('../Fonts/Sansation_Italic-webfont.svg#SansationItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationBoldItalic';
    src: url('../Fonts/Sansation_Bold_Italic-webfont.eot');
    src: url('../Fonts/Sansation_Bold_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Sansation_Bold_Italic-webfont.woff') format('woff'),
         url('../Fonts/Sansation_Bold_Italic-webfont.ttf') format('truetype'),
         url('../Fonts/Sansation_Bold_Italic-webfont.svg#SansationBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
于 2013-04-24T07:53:13.887 に答える
1

このようなパスを試してください

src: url('../Shared/Assets/Fonts/Sansation_Regular-webfont.eot');
于 2013-04-24T07:46:56.337 に答える