2016-11-14 6 views
0

ためにVWを使用しながら、何の単語の区切りは、ビューポート/窓の幅のサイズ変更中に存在しないようにフォントサイズ画面幅間の数学的関係が存在していますか?例えば避けワードブレークフォントサイズ

、Iは16px段落のフォントサイズを設定した場合、

ダミーテキストの悲しみreads-段落の最初の行は、AMET consecteturのadipisicingのELIT座ります。

私は私のビューポートの幅を変更した場合、フォントサイズがpx単位で設定されているため、ビューポートの幅が文に対応するために小さい場合、ケース内の単語の区切りが存在することになります。

ユニットがvwに設定されている場合、ビューポートの幅のサイズ変更中にfont-sizeが増減するので、テキストで画像のサイズを変更していると思います。達成することは可能ですか?

+1

誰かがあなたのフォントサイズの設定を上書きすることができ、そして多くのブラウザがデフォルトの最小フォントサイズを持っています実際の問題はこのように解決されることはありません。 – andi

+0

これは問題ではない、私はこれを達成したい –

+0

あなたはその "数学的関係"にもあなたの正確なテキストを含める必要があります。だから、比率を決定するためには、さまざまなフォントサイズでテキストの長さを測定する必要があります。固定幅フォントを使用している場合は、直接的な関連性がさらにあるかもしれませんが、それでもテキストに含まれる文字の数によって異なります。 – andi

答えて

1

コンテナを特定のvwの幅に設定し、font-sizeを特定のvwの値に設定することができます。これら二つのことで、あなたが期待するように動作し、を提供する必要がありますサイズを変更したフォントを明示的にロードされるのではなく、あなたがいないので、そう何のCSS serif、だけでなく、無CSS "Times New Roman"を「ブラウザは使用しないことを決定したものは何でもフォント」に頼りますそのフォントのどのバージョンが実際に使用されるのかを知っているので、フォントメトリックが必要なものであるとは信じられません。だから、:

  1. 負荷@font-faceルール
  2. を通じて特定のフォントがあなたのコンテナは、コンテナがvw単位でのフォントサイズを指定してくださいvw
  3. で表現の幅を持つように設定されていることを確認してください。

CSS:

.rs { 
    width: 50vw; 
    background: lightgreen; 
    font-family: lato; 
    font-size: 3.3vw; 
} 

HTML:

.... 
<link href="https://fonts.googleapis.com/css?family=Lato" 
<div class="rs"> 
    This is text This is text This is text T 
</div> 

ライブ例:http://jsbin.com/januxevebe/edit?html,css,output

+0

ああ!それは素晴らしいです!私は 'vw'の代わりに' px'で幅を設定している間違いをしました。これはまさに私が望んでいたものです!アップアップされました! –