動的幅の最大フォントサイズを確認

私はSASS/SCSSを使用しており、動的幅を考慮して、コンテナの最大フォントサイズを計算する@function/@mixinを作成します。例えば動的幅の最大フォントサイズを確認

：

<body style="font-size: 10px;"> 
    <div style="width: 960px;"> <!--This width is dynamic--> 
     <span style="font-size: 12.3em">Patrick Rocks</span> 
    </div> 
</body>

この式中の未知の変数は<span>タグのfont-sizeです。私はそれを<body>タグのフォントサイズと比較して123pxになる12.3emに設定しましたが、それはletter-spacingfont-familyまたは他の側面に応じて変わる可能性があります。おそらくこれの複雑さのために、JavaScriptやPHPでこれを計算するのが最もよいでしょう。

出典

2011-09-14 Patrick Robert Shea O' Connor

これを質問に付けることはできますか？ –

私はそれを練り上げ、自分のニーズに合った解決策を見つけました。次のことがわかっている場合にのみ、このソリューションが機能します。

正確なテキストは
を使用しているフォントが親フォント・サイズに基づいて
デフォルトの幅を使用している

DEMO： http://wecodesign.com/demos/stackoverflow-7420897.htm

SCSS：

$logoDefaultWidth: 76; /*Pixels*/ 

@function getFontSize($newLogoWidth) { 
    $fontSize: $newLogoWidth/$logoDefaultWidth; 
    @return #{$fontSize}em; 
} 
@function pxToEm($px) { 
    @return #{$px/10}em; 
} 
body { 
    font-size: 10px; 
} 
.logo { 
    width: pxToEm($logoDefaultWidth); 
} 
.logo.s960 { 
    font-size: getFontSize(960); 
} 
.logo.s480 { 
    font-size: getFontSize(480); 
}

HTML：

<div class="logo s960">Patrick Rocks</div> 
<div class="logo s480">Patrick Rocks</div>

TODO：

このソリューションは、WebKitの（クローム/サファリ）たブラウザの既知の問題があります。 WebKitブラウザでは、@ font-faceフォントが非常に厚くレンダリングされるので、$ logoDefaultWidthが正しくありません。私は、WebKitがフォントをとても厚くするのをやめさせる方法や、WebKitの別の計算方法を見つけようとしています。

出典

2011-09-14 22:28:42

ユーザーのフォントには任意のディメンションがある可能性があるため、サーバー側ではこれを実行できません。あなたは、ブラウザのjavascriptでそれをしなければならないでしょう。

出典

2011-09-14 18:48:04 arnaud576875

私は自分自身のフォントを@fontfaceで提供しています。それで、サーバーサイドで何かできるでしょうか？ Javaといくつかのライブラリを使って、フォントの次元についてたくさんのものを検出する例が見つかりました。しかし、私はPHPを使用しているし、これまでのところ何も見つかりませんでした。 –

ご覧のとおり、@ fontfaceの場合でも、フォントの幅はレンダリングエンジン、ユーザー設定（ヒントなど）などに依存します – arnaud576875

動的幅の最大フォントサイズを確認

答えて

関連する問題