字体面临麻烦..不知道为什么它不起作用？

时间：2012-03-21 13:00:24

标签： css font-face

我整个星期一直在这里，试图在我的网站上进行最后的修饰，我似乎无法让字体工作。

这是我与之合作的内容 - 

/* 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;
}

档案目录如下─ 网站＆gt; img文件夹，类型文件夹，index.php，screenshot.png，style.css

我非常高兴能够如此接近完成这个网站，所以非常感谢任何和所有的帮助。

修改

通过w3c css验证器，这些是我得到的关于@ font-face的错误： 51.值错误：font-family属性font-family不存在于CSS级别2.1中但存在于[css1，css2，css3]中：＆＃39; DalleRegular＆＃39;

  1. 属性src不存在：url（＆＃39; type / dalle_typeface-webfont.eot＆＃39;）

  2. 属性src不存在：url（＆＃39; type / dalle_typeface-webfont.eot？#iefix＆＃39;）格式（＆＃39; embedded-opentype＆＃39;），url （＆＃39; type / dalle_typeface-webfont.woff＆＃39;）格式（＆＃39; woff＆＃39;），url（＆＃39; type / dalle_typeface-webfont.ttf＆＃39;）格式（＆＃39;） ; truetype＆＃39;），url（＆＃39; type / dalle_typeface-webfont.svg＃＆＃39;）格式（＆＃39; svg＆＃39;）

  3. 值错误：font-weight属性font-weight并不存在于CSS级别2.1中，但存在于[css1，css2，css3]中：normal

  4. 值错误：字体样式属性字体样式不存在于CSS级别2.1中，但存在于[css1，css2，css3]中：正常

    5. 编辑pt。 2 在仔细检查我的文件后，我意识到我将我的类型文件夹放在一个类型文件夹中，需要一个类型/类型/路径。修正了一切都很好。谢谢大家的帮助。

3 个答案:

答案 0 :(得分：2)

你有类型子文件夹中的字体吗？ 尝试将/放在路径的开头。 路径应该相对于文档（而不是css文件）。

答案 1 :(得分：1)

尝试

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

h1 {
    font-family: DalleRegular;
}

@font-face{font-family: 'DalleRegular';}将创建一个名为'DalleRegular' 的字体系列，包括单引号。仅当您有需要编码的字符时才使用引号（例如空格和其他非字母数字符号）。

另见：

答案 2 :(得分：0)

我有几次遇到同样的问题，我总是回头看这个页面：Web fonts with @font-face。由于所有子目录，我最终将字体文件的完整路径放在我的css中。

相关问题
最新问题