PX と PT_html/css_WEB-ITnose の違いに関する簡単な説明

PT と PX の違い フォント サイズの設定によく使用される単位は px と pt の 2 つです。これら 2 つの違いは何ですか?

まず基本的な概念を理解してください。px はピクセルを意味します。これは画面上にデータを表示するための最も基本的な点です。

pt は印刷業界で一般的な単位です。 1/72インチまで。

px が点であり、本質的に長さの単位ではないことは明らかです。「点」の長さと大きさを誰が判断できるでしょうか。非常に小さくても大きくても描くことができます。ドットが非常に小さい場合、画像は鮮明であり、それ以外の場合は「低解像度」と呼ばれます。したがって、「ポイント」のサイズは「変化」し、「相対長さ」とも呼ばれます。

pt の正式名称はポイントですが、中国語では「ポイント」とは呼ばれません。PowerWord で確認すると、正確な用語は 1/72 インチの特殊な印刷単位「ポンド」であることがわかります。したがって、これは自然界の長さの標準単位であり、「絶対長さ」とも呼ばれます。

つまり、ピクセルは相対的なサイズであり、ポイントは絶対的なサイズであるという格言があります。

「画面効果」と「印刷効果」を区別します。

Web を閲覧するプロセスにおける「大きい」と「小さい」という概念はすべて「インターフェイス」に基づいています。 「画面」の 。文字や写真、表など「画面」上のさまざまな情報は画面の解像度によって変化します。幅100pxの画像は、解像度800×600では画面幅の1/1を占めます。 8ですが、1024×768では1/10程度しかありません。したがって、フォントサイズを定義するときにピクセルを単位として使用すると、ユーザーが表示解像度を 800 から 1024 に変更すると、ユーザーが実際に見る文字が「小さく」（自然長単位）なり、不鮮明になる場合があります。 、ブラウズに影響します。

単位をptにしても問題ないでしょうか？間違っている！という問題も発生します。今の例は、解像度が px であろうと pt であろうと、解像度が異なるとサイズが変化することを明確に示しています。現在のコンピュータ画面の状況では、さまざまな解像度の下でテキストのサイズを「固定」できることを保証できるユニットはありません。これは実現が難しく、あまり必要ではないためです。世界中には何億人ものコンピューター ユーザーがおり、画面のサイズは 14 インチから 40 インチ、さらにはそれ以上までさまざまです。また、解像度も異なります。すべてのユーザーの前でフォントが同じサイズであることを確認する必要があります。これはミッションインポッシブルです。さらに、コンピュータには独自の規制があります。

では、ページデザインでは px または pt を使用する必要がありますか?

これには原則的な違いはなく、どの角度から考えるかによると思います。

Mac で何が起こっているのかわかりません。Windows では、デフォルトのディスプレイ設定でテキストが 96DPI として定義されています (PPI、Microsoft は DPI と PPI を混合しているため、真剣に考える必要はありません)。この定義は、1px=1/96 インチを説明しています。 pt の概念、1pt=1/72 インチに当てはめると、このような設定では 1px=0.75pt、一般的な宋代では 9pt=12px と結論付けることができます。ディスプレイの解像度が変わらない（一般的に使用される 1024×768 など）ことに基づいて、1px のサイズも固定され、ディスプレイ設定を変更して 144DPI に調整されます。一般的な宋代 9pt = 18px 。元々 12 ピクセルで構成されていたテキストは、18 ピクセルで構成する必要があります。ピクセルが増えると、テキストが「大きく」なり、読みやすくなります。

したがって、px と pt の使用の違いは、ユーザーがデフォルトの 96DPI を変更した場合にのみ発生します。px を使用してテキストを定義すると、ユーザーがどのように設定しても、pt を使用するとサイズは変わりません。テキストを定義するには、ユーザーが 96DPI を超える値を設定すると、値が大きいほどフォント サイズが大きくなります。

(添付の式: px = pt * DPI / 72) ちなみに、先ほどブラウザーのテキスト サイズを変更するオプションについて触れましたが、Web ページのテキスト サイズを変更することもできます。ただし、この場合、px と pt の使用は無効です。これら 2 つは実際の「ピクセル」値を持つ単位であり、9pt は 12px など、サイズが固定されているためです。ここでは、新しい単位 em を引用する必要があります。これは実際には % です。 Web ページのフォントが実際の px または pt の定義を与えていない場合は、デフォルト値 12pt (ブラウザの「フォント サイズ」の「中」に相当する 16px) が使用されるため、これを使用します。サイズを拡大または縮小するための基準として。 （IEのみ、FFではpxやptを定義しても大きくしたり小さくしたりできます）

したがって、この概念から、emは実際の「相対単位」です（パーセント、もちろん相対単位です)、px と pt はどちらも絶対単位です (どちらも固定値です)。

Webデザインにおいて、ユーザー向けの画面の基本単位はpxなので、単位としてpxを使うのが最もシンプルで分かりやすく、ptはWindowsの設定に倍率を掛けただけの数値に変換します。 px にして表示すると完全な円になります。参考までに、Adobe や Microsoft を含む大規模な Web サイトのほとんどは単位として px を使用しており、HTML ではデフォルトの単位が px であるということは、px が Web デザインの「デフォルトの単位」であることも意味しますか?

しかし、Word や Photoshop では、pt を使用すると非常に便利です。 WordやPhotoshopを使う主な目的は画面閲覧ではなく、出力・印刷だからです。エンティティに印刷する場合、自然な長さの単位として pt が便利で実用的です。たとえば、Word の通常の文書では「Song font 9pt」が使用され、タイトルでは「Helvetica 16pt」が使用されます。コンピュータの設定に関係なく、pt は使用されます。印刷するときは常にこの大きさになります。または、Photoshop で、画像内の特定のアート効果のフォント サイズを 72pt に設定し、次に画像をそれぞれ 300DPI と 72DPI に設定して印刷すると、2 つのフォント サイズがまったく同じであることがわかります。 「鮮明さ」が違うということ、300DPIの方が鮮明です。これは疑いようのない結果です。

最後に、表示されたすべての単位を整理します。

px: ピクセル、ピクセル、Web デザインに使用される、直感的で便利な単位。 >pt: ポイントは、印刷業界で使用される標準の長さの単位、1pt=1/72 インチで、非常にシンプルで使いやすいです。

em: つまり、CSS では %、1em=100%。 、これは比率です。CSS の継承関係と組み合わせて使用​​すると、柔軟性があります。

PPI (DPI): 1 インチあたりのピクセル (ドット)、1 インチあたりのピクセル (ドット) の数で、「鮮明さ」と「精度」を表すレートです

PX と PT の変換式:

以前の記事でPXとPTの変換ルールを紹介しましたが、実はとても簡単で、pt=px×3/4です。

例: 12px×3/4=9pt サイズ。

PX を em に変換する式:

PX を em に変換する方法も同様です。つまり、em=16 倍 px、つまり 1.5em=1.5×16 となります。 =24ピクセル。