Twitter ブートストラップをフロント エンド フレームワークとして使用し、Typeplate をタイポグラフィに使用したいと考えています。
それぞれのフレームワークは、以下の URL からダウンロードでき、無料で使用できます。
http://twitter.github.com/bootstrap/ http://typeplate.com/
いくつかの HTML 要素の CSS クラスは、両方のフレームワークで定義されています (例: HTML,body,h1)
Typeplate サイトで Firebug を実行したところ、font-family や font-size などの計算フィールドの値が表示されました。自分のサイトで css に同じ値を使用しても (ブートストラップ css を削除した後でも)、できません。タイププレートのタイポグラフィを取得します。
Twitterのブートストラップ後にタイププレートを使用しています。
お知らせ下さい。
基本的に、以下のコードでテキスト「The Happy Prince」に適用されるプロパティを統合したいと思います
<html class="no-js wf-ffmetaserifwebpro-i7-active wf-ffmetaserifwebpro-i5-active wf-ffmetaserifwebpro-n5-active wf-ffmetaserifwebpro-n7-active wf-active">
<head><style>
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary
{
display: block;
}
html
{
font-family: sans-serif;
-ms-text-size-adjust: 100%;
}
body
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
h1
{
font-size: 2em;
margin-top: 0.67em;
margin-right: 0px;
margin-bottom: 0.67em;
margin-left: 0px;
}
html
{
line-height: 1.65;
font-family: serif;
font-size: 112.5%;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size-adjust: none;
font-stretch: normal;
}
body
{
color: #444444;
word-wrap: break-word;
}
h1, h2, h3, h4, h5, h6
{
line-height: 1;
margin-top: 0px;
}
h1, .alpha
{
font-size: 3.33rem;
margin-bottom: 0.49rem;
}
h1, h2, h3, h4, h5, h6
{
color: #222222;
}
body
{
margin-top: 6em;
margin-right: auto;
margin-bottom: 6em;
margin-left: auto;
max-width: 34em;
background-image: url("../img/subtle_grunge.png");
background-attachment: scroll;
background-repeat: repeat;
background-position-x: left;
background-position-y: top;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;
}
.wf-active body, .wf-inactive body
{
font-family: "ff-meta-serif-web-pro",serif;
font-weight: 400;
visibility: visible;
}
</style></head>
<body><section><article><header>
<h1>
The Happy Prince
</h1>
</header></article></section></body></html>
"