Question

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

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

enter image description here

这是我无法用任何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，body，text，（text），“”。

有人告诉我如何才能将这些文本显示在我选择的字体中 - 我想使用CSS可能会让事情变得简单！

URL：

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';}

Answer 1

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

Answer 2

CSS“font”属性要求“font-size”和“font-family”值都是vaild。 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';

Answer 3

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

您可以尝试在css中为“body”元素指定字体和格式，或者在某些

标记中包含tweat的内容。

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

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

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

http://modernizr.com/

Answer 4

我认为在所有浏览器中实现此功能的最佳选择是将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;

Answer 5

@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/

是否可以使用CSS定位HTML（文本）？ - 它显示为（文本）ID

5 个答案: