3

私のWeb サイトでは、フォント ファミリーのかなりあいまいなフォントを使用することにしました。最もよく知られているフォント (ファミリーで 3 番目) は、ほとんどのコンピューターが使用しているセンチュリー ゴシックです。

font-family:Tw Cen MT,Gill Sans,Century Gothic,sans-serif;

問題は、センチュリー ゴシックの 12px フォントが、Tw Cen MT & Gill Sans の 12px フォントよりもはるかに大きいことです。コンピューターが Century Gothic にフォールバックすると、フォントがめちゃくちゃになります。センチュリーゴシックのフォントサイズが通常の75％になるというJqueryソリューションが必要です。フォントを検出する必要はありません。ただ、センチュリーゴッチを使っている場合は、フォントサイズを通常の75%にしてください。解決策はありますか？

4

3 に答える 3

1

垂直方向のリズムで作曲する場合、これは実際にはそれほど問題にはなりません。

http://24ways.org/2006/compose-to-a-vertical-rhythm

これは完全にやり過ぎですが、 http：//www.lalit.org/lab/javascript-css-font-detectを使用して条件付きを作成する ことができます。

最初の方法（垂直リズム）のようなものを使用して、可能な限り問題全体を無関係にすることをお勧めします。夜はずっとよく眠れます。

于 2010-01-22T18:10:00.160 に答える
0

問題は、センチュリーゴシックの比較的高いエックスハイトだと思います。宣言exで単位を使用してみてください。、、、およびとは異なり、単位は高さに基づいています。font-sizeexempxpt

をピクセルサイズに設定するline-heightと、高さを正規化するのにも役立ちますが、ブラウザでテキストのズームレベルを変更するユーザーにとっては問題が発生します。

編集：私は戻ってテストしました、そして元のユニットは助けにはなりません。センチュリーゴシックは、他のものよりも背が高く、幅が広いです。

問題は、DOMでは、リストされた代替フォントからユーザーがどの特定のフォントを使用しているかを判別できず、CSSではフォントごとに個別のフォントサイズ（または調整）を使用できないことです。

ただし、JQueryはテキストのコンテナのサイズをテストできます。したがって、既知の文字を含む非表示の要素をページに指定すると、ユーザーのブラウザでその要素の幅をテストできます。

その文字の幅はユーザーがインストールしたフォントによって決まるため、その幅を自分のコンピューターの好みのフォントの同じテキストの幅と比較して、ユーザーのフォントサイズを計算して自分のフォントサイズにほぼ一致させることができます。意図されました。

コード例：

<style>
   p { font-size: 15pt; 
       font-family:"Tw Cen MT","Gill Sans","Century Gothic",sans-serif;
     }
   p#testwidth {
     /* Ensure test is invisible and isn't messed up with borders, etc. */
     margin:0; padding:0; border:none; color:white; display:inline;
     }
</style>

<p>Your text goes here.</p>
<p id="testwidth">m</p>

<script language="Javascript">
   window.onload = function() {
      // Same as your default CSS for font-size (just the number, not the units)
      var desiredFontSize = 15; 
      // Experiment by testing width when Tw Cen MT *is* available. In pixels. 
      var expectedWidth = 17;
      // width found will depend which font is available
      var testedWidth = $('#testwidth').width();
      // ratio, rounded to one decimal point
      var normalizedFontSize = Math.round( 
             expectedWidth / testedWidth * desiredFontSize * 10) / 10;
      // change the stylesheet to "fix" the font size (in your preferred units)
      $('p').css('font-size', normalizedFontSize + 'pt');
      }

4つの警告：

  • 2つの代替フォント間のサイズの違いをすべて克服できるとは限りません。好みのフォントがない場合、垂直方向の配置などは完全ではない可能性があります。
  • ブラウザでデフォルトのテキストズームレベルが設定されているユーザーを困らせる可能性があります。これは、ページの読み込み時にフォントサイズを強制するためです。幸いなことに、必要に応じてズームインまたはズームアウトし、強制されたフォントサイズを上書きすることができます。
  • IEで小数点以下の数字が多いフォントサイズに問題があったことを思い出しているようですので、四捨五入しました。十分に近い必要があります。
  • 一文字「m」の幅を使用しました。より正確な結果が必要な場合は、ユーザーのブラウザーで折り返されない限り、より長い文字列を使用できます（幅のテストに失敗します）。いくつかの大文字と小文字、およびスペースは良いテストになるはずです。
于 2010-01-22T18:15:13.517 に答える
0

lalit.org には、ユーザーのマシンで使用できるフォントを推測するスクリプトがあります。

それを使用して、Century Gothic が使用されているかどうかを確認できる場合があります。使用されている場合は、フォント サイズを修正する追加のスタイルシートを読み込みます。

于 2010-01-24T08:25:11.717 に答える