除了一个页面之外，font-face可以工作 - 可能是什么问题？

Question

Font-Face正在处理除我的一个页面之外的所有页面 - About。因为它只是一个不起作用的页面，所以我认为这可能是文件路径的问题。此外，一切都在当地很好。可能是什么原因？我该如何补救？

谢谢。

<div id="about">
    <div class="blurb">
        <p style="text-decoration:underline;color:#f20000;"><span style="color:#282828;">Welcome to BodywoRx</span></p>
</div><!-- end blurb -->

    <div class="banner-image">
        <img src="<?php echo get_template_directory_uri(); ?>/img/large.jpg" alt="about-place-holder" id="aph" />
    </div><!-- end banner-image -->
    <p>Body WoRx was founded on the belief that many dysfunctions of the body can be healed through massage therapy.  In a world where prescriptions are written for variety of symptoms, we offer an alternative solution to helping the body heal itself.  We are located in historic downtown Grand Prairie, conveniently centered between Fort Worth and Dallas.</p>
    <div class="bio">
        <img src="<?php echo get_template_directory_uri(); ?>/img/bridgett.jpg" alt="bridgett-freiburger" id="bf" />
        <p>Bridgett suffered from chronic neck, back, and shoulder pain for many years.  She went to many doctors, specialists, had many MRI&apos;s, but no one knew what was causing the pain.  She had been prescribed countless medications to help ease discomfort, but nothing to address the cause.  Bridgett stumbled across massage therapy and has since become a firm believer and advocate in its many benefits and healing properties.  Before getting into massage therapy, Bridgett served in the Marine Corps, and then continued supporting the war fighter while working at Bell Helicopter. Bridgett is a graduate of North Texas School of Swedish Massage.</p>
    </div><!-- end bio -->
</div><!-- end about -->

#about .banner-image {
    padding-bottom: 40px;
}

#about span {
    font-family: alexandria-bold;
    font-size: 193%;
    font-weight: normal;
    line-height: 1.5;
}

#about p {
    padding-top: 10px;
}

#about .bio {
    margin-top: 40px;
    padding-bottom: 40px;
}

#about .bio p {
    float: right;
    padding-left: 35px;
    width: 655px;
}

Answer 1

主要和关于页面的指定位置有 6种 @font-face字体中的3种。

Firefox w / Firebug Net Tab屏幕截图：

旁注：您在anchor tag中遗漏了关闭 id="address"两个（可能更多）这些页面。

---

状态更新：我找到了 Firefox 的@font-face问题解决方案。有两个问题。

首先，当您最初发布LIVE网页链接时，让我们及时回访，说明您没有任何问题。 以下所有链接均可使用，并反映所见的格式。

了解works是 TYPO ，应该是worx。 这显然不是您的网站。

http://massagebybodyworks.com/

好的，这是更正的版本...... 正确 ？

http://massagebybodyworx.com/

嗯，修正后的版本 worxs 根据需要（双关语）。

现在让我们看一下关于页面的链接不工作：

http://www.massagebybodyworx.com/about

准备休息！ 您是否看到了错误？嗯，因为事实证明您的关于页面正在使用 www 作为锚标记，而<强>不应该。这就是它破裂的原因。锚标记应为：

http://massagebybodyworx.com/about

如上所述，这是使用了 www 的更正后的主页，并注意到它在Firefox中也会中断： http://www.massagebybodyworx.com/

好的，问题1已解决。只需修复您的锚标记不，即可在链接中使用 www 。

问题2是关于您的服务器.htaccess文件，因为它控制着如何处理传入的链接处理。

具体而言，只要有人通过 www 前缀手动输入或访问您的网页，您的服务器 就需要配置 才能投放他们是非 www 网站。然后，您的网页将按照您的意图展示。如果需要，请在Google上详细了解.htaccess file。

---

那么，为什么它在Firefox而不是Chrome中失败？

Firefox有不同的安全规则，错误地使用@font-face会导致它因Same Origin Policy规则而中断。

在HTML网页标记中可以看到它在Firefox中出现故障的原因。在那里，您正在使用absolute URL调用负责@font-face字体的CSS文件：

"http://massagebybodyworx.com/wp-content/themes/bodyworx/style.css"

然后，通过 www 访问您的网站将导致应用同源策略规则，导致您的@font-face字体无法按预期显示。

但是，您可以使用relative URL让Firefox感到高兴：

"wp-content/themes/bodyworx/style.css"

拥有相对网址也意味着@font-face在访问您的网站时无论是否有 www 都没有问题传入链接，但首选正确处理.htaccess文件。

旁注：您的主题空间问题应该是头部中链接标记的URL编码。以下是它的外观：

<link rel="pingback" href="BodywoRx%20Massage" />

Answer 2

此页面正在拾取#about div的样式，如下所示

#about span {
    font-family: alexandria-bold;
    font-size: 193%;
    font-weight: normal;
    line-height: 1.5;
    }

我假设您希望它像其他页面上的较小文本一样？如果是这样，要么将其从#about div中删除，要么将以下内容放入css中，使其与相应的页面相同

#about .blurb p,
#about .blurb p span {
    font-family: alexandria;
    font-size: 193%;
    font-weight: normal;
    line-height: 1.5;
    text-decoration: underline #f20000;
    }

我希望这会有所帮助。

Answer 3

似乎浏览器无法在以下目录的about页面上加载webfont：http://massagebybodyworx.com/wp-content/themes/bodyworx/type/

我认为这与服务器配置有关，它允许从massagebybodyworx.com访问该目录的内容，但不能访问www.massagebybodyworx.com，将其视为跨站点脚本的尝试。