字体问题..不知道为什么它不起作用？

【问题标题】：font face troubles.. not sure why it won't work?字体问题..不知道为什么它不起作用？
【发布时间】：2012-04-06 00:04:43
【问题描述】：

我整个星期都在做这件事，试图对我的网站进行最后的润色，但我似乎无法让字体正常工作。

这就是我的工作-

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

文件目录如下- 站点 > img 文件夹、类型文件夹、index.php、screenshot.png、style.css

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

编辑

通过 w3c css 验证器，这些是我得到的关于 @font-face 的错误： 51. Value Error : font-family 属性 font-family 在 CSS level 2.1 中不存在但存在于 [css1, css2, css3] : 'DalleRegular'

  1. 属性 src 不存在：url('type/dalle_typeface-webfont.eot')

  2. 属性 src 不存在：url('type/dalle_typeface-webfont.eot?#iefix') format('embedded-opentype'),url('type/dalle_typeface-webfont.woff') 格式('woff'),url('type/dalle_typeface-webfont.ttf') 格式('truetype'),url('type/dalle_typeface-webfont.svg#') 格式('svg')

    李>

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

  4. 值错误：font-style 属性 font-style 在 CSS 级别 2.1 中不存在，但存在于 [css1, css2, css3] 中：正常

编辑点。 2 在更仔细地检查我的文件后，我意识到我将我的类型文件夹放在一个类型文件夹中，需要一个类型/类型/路径。解决了这个问题，一切都很好。谢谢大家的帮助。

【问题讨论】：

  • 这是否存在于某个地方，您是否确定为您的字体文件指向正确的位置？如果您在 Chrome 中查看控制台（在 Windows 上按 F12，然后最右侧的选项卡）是否有任何错误？
  • font-face 的 CSS 看起来不错，一定是路径问题。你确定你有正确的道路吗？请记住，它们是相对于文档的，而不是根。
  • 使用CSS validator时需要选择“Profile: CSS level 3”。 font-face 未在 CSS 级别 2.1 中定义。
  • @KyleSevenoaks，你能详细说明一下吗？你是什​​么意思它必须相对于文档，而不是根？
  • @Zeta，感谢您的建议。不过，虽然验证错误已清除，但问题仍然存在。

标签： css font-face


【解决方案1】：

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

【讨论】：

    【解决方案2】：

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

    【讨论】：

    • 尝试了类型文件夹名称前面的/，给了我一个名为“/type”的文件夹，然后更改了css中对该文件夹的所有引用-似乎没有改变。
    【解决方案3】：

    试试

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

h1 {
    font-family: DalleRegular;
}

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

    另见：

    【讨论】：

    • 我昨天试过了。我使用没有 ' 的代码没有变化，然后添加了 " 并没有发现任何变化。
    • 为我工作。还将config.assets.paths << Rails.root.join('app', 'assets', 'fonts')和config.assets.precompile += %w( .svg .eot .woff .ttf .woff2 )放入development.rb并重启服务器。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-05-14
    • 2017-10-30
    • 1970-01-01
    • 2020-11-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode