2012-03-21 20 views
1

私は一週間中このサイトに行ってきました。私のサイトには仕上げをしようとしていました。ここでフォント面のトラブル..なぜそれが動作しませんか?

は私が

/* Reset */ 

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, address, code, img, 
small, strong, dl, dt, dd, ol, ul, li 
fieldset, form, label { 
    background: transparent; 
    border: 0; 
    font-size: 100%; 
    margin: 0; 
    outline: 0; 
    padding: 0; 
    vertical-align: baseline; 
} 

body { 
    background: url(img/background.png) repeat; 
    font-family: Georgia, 
       Constantia, 
        "Lucida Bright", 
        "Bitstream Vera Serif", 
        "Liberation Serif", 
        serif; 
    line-height: 1.5; 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(235,235,235,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(235,235,235,1))); /* Chrome,Safari4+ */ 
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(235,235,235,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(235,235,235,1) 100%); /* Opera 12+ */ 
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(235,235,235,1) 100%); /* IE10+ */ 
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(235,235,235,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ebebeb',GradientType=1); /* IE6-8 fallback on horizontal gradient */ 
} 

ol, ul { 
     list-style-type: none; 
} 

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

} 

/* End Reset */ 

h1 { 
    font-family: 'DalleRegular'; 
    font-size: 160%; 
    font-weight: normal; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    -webkit-text-shadow:1px 1px 1px #cdcdcd; /* for chrome */ 
    -moz-text-shadow:1px 1px 1px #cdcdcd; /* for firefox */ 
    -o-text-shadow:1px 1px 1px #cdcdcd; /* for opera */ 
    -ms-text-shadow:1px 1px 1px #cdcdcd; /* for ie 9+ */ 
    -khtml-text-shadow:1px 1px 1px #cdcdcd; /* for gecko based browser*/ 
    text-shadow:1px 1px 1px #cdcdcd;; /* for all browser*/ 
} 

h2 { 
    font-size: 70%; 
    font-weight: normal; 
} 

h3 { 
    font-size: 70%; 
    font-weight: bold; 
} 

h4 { 
    font-size: 70%; 
    font-weight: normal; 
} 

p { 
    font-size: 100%; 
} 

a { 
    color: #202020; 
    font-size: 100%; 
    text-decoration: none; 
} 

a:hover { 
    text-decoration: underline; 
} 

/* Main Styles */ 

header { 
    background: none; 
    float: left; 
    margin-top: 123px; 
    margin-left: 22px; 
    position: fixed; 
    width: 158px; 
} 
#main { 
    float: left; 
    margin-left: 315px; 
    margin-top: 310px; 
} 
#portfolio { 
    float: left; 
    margin-left: 315px; 
    margin-top: 310px; 
} 
#contact-form { 
    float: left; 
    margin-left: 315px; 
    margin-top: 310px; 
} 
#sidebar { 
    border-top: 1px solid #202020; 
    margin-top: 295px; 
    margin-left: 1084px; 
    padding-top: 25px; 
    position: fixed; 
    width: 158px; 
} 

.postinfo { 
    font-size: 70%; 
    font-weight: normal; 
} 

.shadow { 
    -moz-box-shadow: 1px 1px 1px 1px #cdcdcd; 
    -webkit-box-shadow: 1px 1px 1px 1px #cdcdcd; 
    box-shadow:  1px 1px 1px 1px #cdcdcd; 
} 

/* Header */ 

header logo { 
    margin-top: ; 
} 
header nav { 
    border-top: 1px solid #202020; 
    margin-top: 25px; 
    width: 158px; 
    padding-top:25px; 
} 
header nav ul li { 
    font-family: 'DalleRegular'; 
    font-size: 160%; 
    letter-spacing: 2px; 
    padding-left: 55px; 
    margin-top: -10px; 
    -webkit-text-shadow:1px 1px 1px #cdcdcd; /* for chrome */ 
    -moz-text-shadow:1px 1px 1px #cdcdcd; /* for firefox */ 
    -o-text-shadow:1px 1px 1px #cdcdcd; /* for opera */ 
    -ms-text-shadow:1px 1px 1px #cdcdcd; /* for ie 9+ */ 
    -khtml-text-shadow:1px 1px 1px #cdcdcd; /* for gecko based browser*/ 
    text-shadow:1px 1px 1px #cdcdcd;; /* for all browser*/ 
} 

/* Sidebar */ 

#sidebar #dictionary { 
    position: fixed; 
    margin-top: -8px; 
    width: inherit; 
} 

#sidebar #twitter { 
    list-style-type: none; 
    margin-top: 70px; 
    position: fixed; 
    width: inherit; 
} 

/* Main */ 

#main article .postinfo { 
    list-style-type: none; 
    margin-left: ; 
    width: 150px; 
} 

#main article p { 
    float: right; 
    margin-top: -85px; 
    margin-left: 230px; 
    padding-left: ; 
    width: 403px; 
} 

/* Work */ 

#portfolio #catergory ul { 
    font-family: 'DalleRegular'; 
    font-size: 160%; 
    letter-spacing: 2px; 
    padding-left: 55px; 
    margin-top: -10px; 
} 

#portfolio #category ul .portfolio-item { 
    float: right; 
    margin-top: -80px; 
    margin-left: 160px; 
    padding-top: 50px; 
    width: 433px; 
} 

#portfolio #category ul .portfolio-item a { 
    padding-right: 10px; 
} 

/* Contact */ 

#invite .postinfo { 
    list-style-type: none; 
    width: 150px; 
} 

form { 
    margin-top: -73px; 
} 

label { 
    font-family: 'DalleRegular'; 
    font-size: 160%; 
    font-weight: normal; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    float: left; 
    margin-left: 200px; 
    vertical-align: top; 
    -webkit-text-shadow:1px 1px 1px #cdcdcd; /* for chrome */ 
    -moz-text-shadow:1px 1px 1px #cdcdcd; /* for firefox */ 
    -o-text-shadow:1px 1px 1px #cdcdcd; /* for opera */ 
    -ms-text-shadow:1px 1px 1px #cdcdcd; /* for ie 9+ */ 
    -khtml-text-shadow:1px 1px 1px #cdcdcd; /* for gecko based browser*/ 
    text-shadow:1px 1px 1px #cdcdcd;; /* for all browser*/ 
} 

input { 
    font-family: Georgia, 
       Constantia, 
       "Lucida Bright", 
       "Bitstream Vera Serif", 
       "Liberation Serif", 
       serif; 
    font-size: 70%; 
    float: right; 
    border-style: 1px solid #202020;; 
    height: 13px; 
    letter-spacing: 1px; 
    margin-left: 10px; 
    margin-top: 7px; 
    width: 265px; 
} 

textarea { 
    border-style: 1px solid #202020; 
    margin-left: 2px; 
    margin-top: 7px; 
    width: 270px; 
    height: 150px; 
} 

#submitbutton { 
    background: none; 
    border-style: none; 
    float: left; 
    font-family: Georgia, 
       Constantia, 
       "Lucida Bright", 
       "Bitstream Vera Serif", 
       "Liberation Serif", 
       serif; 
    margin-left: 167px; 
    margin-top: 5px; 
    padding-bottom: 50px; 
} 

br { 
    clear: left; 
} 

with-ファイルディレクトリを働いているものです follows-としてサイト>のimgフォルダ、タイプフォルダ、index.phpを、screenshot.png、style.cssに

です私は本当にこのサイトを終了することにとても興奮しているので、すべての援助は非常に感謝しています。 W3C CSS検証を通じて入れ

編集

が、これらは私がする@ font-faceに関して取得エラーです: 51値エラー:フォントファミリのプロパティのfont-familyは存在しませんCSSレベル2.1が、[CSS1、CSS2、CSS3]に存在する:不動産srcが存在しない 'DalleRegular'

  1. :URL( 'タイプ/ dalle_typeface-webfont.eot')

  2. プロパティSRC Doe url( 'type/dalle_typeface-webfont.woff')形式( 'woff')、url( 'type/dalle_typeface-webfont.eot?#iefix') ( 'svg')形式( 'svg')

  3. 値の誤り:font-weightプロパティfont-weightプロパティfont-weightプロパティfont- CSSレベル2.1では存在しませんが、[CSS1、CSS2、CSS3]に存在します:通常

  4. 値エラー:font-styleフォントスタイルはCSSレベル2.1では存在しませんが、[CSS1、 css2、css3]:通常

編集pt。 2 私のファイルをもう少し詳しく調べると、タイプフォルダにtypeフォルダを置き、タイプ/タイプ/パスが必要になることが分かりました。それを修正し、すべてが順調です。皆さん、お世話になりました。

+0

これはどこかでライブで、あなたのフォントファイルの正しい場所を間違いなく指していますか? Chromeでコンソールを見ると(Windowsの場合はF12、右端のタブ)、エラーはありますか? – CherryFlavourPez

+0

font-faceのCSSは上手く見えますが、これはパスの問題でなければなりません。あなたは正しい道を確信していますか?それらはドキュメントに関連しており、ルートには関連していないことを忘れないでください。 – Kyle

+0

[CSSバリデータ](http://jigsaw.w3.org/css-validator/#validate_by_input+with_options)を使用する場合は、「プロファイル:CSSレベル3」を選択する必要があります。 'font-face'はCSSレベル2.1で定義されていません。 – Zeta

答えて

2

タイプサブフォルダにフォントがありますか? パスの先頭に/を付けるようにしてください。 パスはドキュメントに関連している必要があります(cssファイルではありません)。

+0

"/ type"という名前のフォルダをタイプしてから、そのフォルダへの参照が変更されていないように、タイプフォルダ名の前で/を試してみました。 – AMC

1

}

@font-face { 
    font-family: DalleRegular; 
    /*... */ 
} 

h1 { 
    font-family: DalleRegular; 
} 

@font-face{font-family: 'DalleRegular';を試してみては単一引用符を含む'DalleRegular'と呼ばれるフォントファミリを作成します。引用符は、エンコードする必要のある文字(空白や英数字以外の記号など)がある場合にのみ使用します。

も参照してください:

+0

私はこれを昨日試しました。私は変更を加えずにコードを使用していましたが、変更がないことに気付きました – AMC

+0

「config.assets.paths << Rails.root.join( 'app'、 'assets'、 'fonts' ) 'と' config.assets.precompile + =%w(.svg .eoff .wf .ttf .woff2) 'を' development.rb'に変換し、サーバを再起動します。 – Mirror318

0

私はいくつかの場面で同じ問題があったと私は常にこのページに戻って参照してください:Web fonts with @font-face。私はすべてのサブディレクトリのために私のCSSにフォントファイルの完全なパスを入れ終わった。

関連する問題