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

Posted 2023-03-06

技术标签:

【中文标题】字体问题..不知道为啥它不起作用？【英文标题】：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'

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

属性 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')

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

值错误：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，感谢您的建议。不过，虽然验证错误已清除，但问题仍然存在。 【参考方案1】：

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

【讨论】：

【参考方案2】：

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

【讨论】：

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

试试

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


h1 
    font-family: DalleRegular;

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

另见：

CSS Fonts Module Level 3: Basic Font Properties

【讨论】：

我昨天试过了。我使用没有 ' 的代码没有变化，然后添加了 " 并没有发现任何变化。为我工作。还将config.assets.paths << Rails.root.join('app', 'assets', 'fonts')和config.assets.precompile += %w( .svg .eot .woff .ttf .woff2 )放入development.rb并重启服务器。

以上是关于字体问题..不知道为啥它不起作用？的主要内容，如果未能解决你的问题，请参考以下文章

为啥它不起作用，控制台程序转换为 Windows Form C# [关闭]

为啥谷歌字体粗细不起作用？

Javascript代码不起作用？告诉我为啥[重复]

为啥 CSS 中的“光标：指针”效果不起作用

为啥在javascript中删除对象不起作用[重复]

更改默认字体不起作用