1

我在将 twitter 嵌入到我从 HTML 5 转换的 wordpress 运行网站时遇到问题。

我遇到的问题是推文不在我的自定义字体中......

在此处输入图像描述

这是我无法使用任何 css 定位的 HTML 代码，我正在为网站上的所有文本使用通过 css 导入的自定义字体。

<article id="twitter">
    <h3>Twitter:</h3>
        Test tweet to get embedded code. 
            <a href="http://twitter.com/Max__Chandler/statuses/202020801917095939" class="aktt_tweet_time">28 mins ago
    </a>
</article>

取自 Index.php 的 PHP 代码

<article id="twitter">
    <h3>Twitter:</h3><?php aktt_latest_tweet(); ?>
</article>

chrome中显示的css ID是

article#twitter (text)

我尝试定位：#twitter、html、正文、文本、（文本）、“”。

有人启发我如何让这段文本以我选择的字体显示 - 我只想使用 CSS 来保持简单！

网址：

http://www.msc-media.co.uk

这是使用 CSS 导入字体的方式

    @font-face {
        font-family: 'JosefinSansStdLight';
        src: url('/wp-content/themes/1/JosefinSansStd-Light-webfont.eot');
        src: url('/wp-content/themes/1/JosefinSansStd-Light-webfont.eot?#iefix') format('embedded-opentype'),
             url('/wp-content/themes/1/JosefinSansStd-Light-webfont.woff') format('woff'),
             url('/wp-content/themes/1/JosefinSansStd-Light-webfont.ttf') format('truetype'),
             url('/wp-content/themes/1/JosefinSansStd-Light-webfont.svg#JosefinSansStdLight') format('svg');
        font-weight: normal;
        font-style: normal;

    }


    p, a, h1, h2, h3, h4, h5, h6{
        font:'JosefinSansStdLight';
        letter-spacing: 0.1em;
    }
    a{font:1.25em 'JosefinSansStdLight';}
    p{font:1.2em 'JosefinSansStdLight';}
    h1{font:3em 'JosefinSansStdLight';}
    h2{font:2em 'JosefinSansStdLight';}
    h3{font:1.25em 'JosefinSansStdLight';}
    h4{font:18px/27px 'JosefinSansStdLight';}
    h5{font:18px/27px 'JosefinSansStdLight';}
    h6{font:18px/27px 'JosefinSansStdLight';}
4

5 回答 5

1

尝试#twitter {font-family: your fonts}如果它不起作用，那么您的字体或嵌入/注册它的方式有问题。
要测试它，请尝试更改background-color字体是否有效，这是您的问题。

于 2012-05-14T13:44:09.130 回答
1

CSS“font”属性要求“font-size”和“font-family”值都有效。您的 CSS 文件中有几个地方，您有以下内容：

font:'JosefinSansStdLight';

这不是有效的 CSS，因为它不包含“font-size”值。您应该像为 a、p、h1、h2、h3 等所做的那样包含大小：

a{font:1.25em 'JosefinSansStdLight';}
p{font:1.2em 'JosefinSansStdLight';}
h1{font:3em 'JosefinSansStdLight';}
h2{font:2em 'JosefinSansStdLight';}
h3{font:1.25em 'JosefinSansStdLight';}
h4{font:18px/27px 'JosefinSansStdLight';}
h5{font:18px/27px 'JosefinSansStdLight';}
h6{font:18px/27px 'JosefinSansStdLight';}

或者，您可以将“font”声明更改为“font-family”声明：

font-family:'JosefinSansStdLight';
于 2012-05-14T14:14:45.490 回答
0

看起来 tweat 的主体没有包含在任何段落标签中，并且显示的 css 不包括段落或标题之外的任何文本方向。

您可以尝试在 css 中为“body”元素指定字体和格式，或者将 tweat 的内容包装在一些

标签。

当您提到定位问题时，可能值得注意的是它是一个 HTML5 元素，并且目前对使用此元素识别和定位 css 的支持可能因浏览器而异。

您可以使用 html5shiv 或modernisr javascript 变通方法来支持在不受支持的浏览器中将其更改为 div。

http://code.google.com/p/html5shiv/

http://modernizr.com/

于 2012-05-14T14:04:16.653 回答
0

我认为让它在所有浏览器上工作的最佳选择是将 twitter 内容包含在另一个 html 元素中——一个 div 或一个 span。为此，你想让你的 php 代码看起来像这样：

<article id="twitter">
    <h3>Twitter:</h3>
    <div class="twitter_content">
      <?php aktt_latest_tweet(); ?>
    </div>
</article>

然后，您将在.twitter_content该类上设置 css 属性。

如果您使用 div （就像我在这里所做的那样），您可能希望这些 css 属性之一是display:inline-block;

于 2012-05-14T14:07:02.707 回答
0

@janw 和 @digitalsean 是正确的。使用font-family: 'JosefinSansStdLight'而不仅仅是font: 'JosefinSansStdLight'. 根据浏览器的不同，您可能还需要添加一个 shiv。

听起来您可能正在处理 CSS 特异性问题。CSS 代码中的其他内容比您尝试应用的声明具有更高的特异性。尝试使您的声明如下所示：

body article#twitter {

    font-family:'JosefinSansStdLight' !important;
    letter-spacing: 0.1em;

}

body article#twitter h3 {

    font-family:'JosefinSansStdLight' !important;
    letter-spacing: 0.1em;

}

适用于我在此示例中使用您的基本结构：http: //jsfiddle.net/jstam/Z8Fh7/

于 2012-05-14T14:14:27.147 回答