1

HTML5から変換しているワードプレスの実行サイトにTwitterを埋め込む際に問題が発生しました。

私が抱えている問題は、ツイートが私のカスタムフォントではないということです...

ここに画像の説明を入力してください

これは、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>

クロムで示されているCSSIDは

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

「font-size」値が含まれていないため、これは有効なCSSではありません。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には、段落またはヘッダーの外側のテキストの方向が含まれていません。

「body」要素のフォントとフォーマットをcssで指定するか、tweatのコンテンツをいくつかでラップしてみてください。

タグ。

ターゲティングの問題について言及する場合、それはHTML5要素であり、この要素を使用したcssの認識とターゲティングのサポートは、現時点ではブラウザーごとに異なる可能性があることに注意してください。

html5shivまたはmodernisrjavascriptの回避策を使用して、サポートされていないブラウザーでこれを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属性の1つを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 に答える