CSSフォントフェイスのパス

Question

これは私のフォントのパスです：project-> assets-> css-> fonts、fontsフォルダは私のフォントファイルです。私はこの方法を試しました：

@font-face { 
    font-family: 'ralewaythin'; 
    src: url('assets/css/fonts/raleway_thin-webfont.svg') etc 

しかし、私は本当にパスで吸う。申し訳ありませんが、これは本当に愚かですが、私は実際にそれらを理解することができません

Answer 1

相対URLは許可されており、スタイルシートのURLを基準にしています（WebページのURLではなく）。

お見積もりMDNです。

相対パスを使用している場合は、.cssファイルのパスに注意してください。あなたのファイルと仮定すると、assets/cssディレクトリにもあり、おそらく正しいパスは次のようになります。

@font-face { 
    font-family: 'ralewaythin'; 
    src: url('fonts/raleway_thin-webfont.svg'); 
    ... 
} 

しかし、絶対URLも（もお勧めではない）完全に罰金です。したがってhttp://www.yoursite/assets/css/fonts/raleway_thin-webfont.svgも同様に動作するはずです。

Answer 2

CSSファイルが存在する場合はからの参照/相対パスを渡す必要があります。プロジェクトパスではありません。ので、あなたのsrc URLはあなたがフォントファイルを座っているされている正しいパスを渡す必要が

url('fonts/raleway_thin-webfont.svg') 

おかげ

Answer 3

でなければなりません。パスは.cssファイルからの相対パスでもかまいません。標準的なフォルダ構造に従えばすべてのプロジェクトに取り組んでいますが、混乱することはありません。 GoogleフォントCDNまたはその他のライブリンクを使用している場合は、ローカルファイルのパスについて心配する必要はありません。