htmlとフォトショップのフォントについて

質問

初めてwebサイトを作成しているのですが、テキストの表示はCSSでsans-serifを指定しております。

そしてフォトショップで画像を作成しているのですが、一部だけ文字も作っています。
そのフォトショップでの文字は、CSSで指定したsans-serifと同じように、sans-serifを指定したかったのですが、ありませんでした。

そのため、フォトショップの文字にはMSPゴシックを指定したら、CSSで指定したsans-serifに近くなりましたが、やはり若干違います。

他のWebサイトを見ると、CSSで指定した文字と画像の文字が、ほとんど同じようなケースがあります。

私のような問題がある場合、どのようなフォントを指定すればCSSとフォトショップの文字は同じようになるのでしょうか？

宜しくお願い致します。

回答No.3

ORUKA1951 · ベストアンサー

フォトショップに限らず、使用されるフォントは利用するプラットホーム(端末のOSやインストールされているフォントやアプリケーション)によって異なります。
　HTML,CSSによるフォント指定は、
font-family: Arial,Verdana, "ＭＳ Ｐゴシック", sans-serif;
のように、端末が利用できるフォントを順番に探せるように用意しておいて、最後にキーワードとして総称ファミリー名を""無で記述しておきます。
　なお、MSPゴシックではなくて"ＭＳ Ｐゴシック"です。スペースや日本語を含むファント名は""で括って正確に記述します。もし、この記述が間違っているとしたら原因はそこにあります。
　ただし、それはあくまであなたのパソコンで見る限りはあうという意味でしかありません。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )のは、できるだけ避けなければなりません。また、HTMLの目的が
『どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )』であり、そのためにHTMLでフェブページを作成するのですから、フォントにこだわること自体あまり薦められません。

　もし他の部分と同じフォントを使用したいなら
<a href="./" ><img src="./images/goTop.gif" width="120" height="40" alt="トップへ"></a>
ではなく、
<a href="./" >トップへ</a>
としておいて、スタイルシートで
a[href="./"]{background:url(./images/goTop.gif);width:120px;height:40px;}
のように画像から文字を取り除いたものを背景にするべきでしょう。

　テキスト画像を使用するのは、ロゴなどフォントのデザイン自体が特殊でユーザーが利用できる可能性が少ないときにのみ使用する。
<img src="./images/logo.gif" width="120" height="120" alt="Logo">
でフォントには「ＤＦＧ隷書体」をつかうとか・・

お礼

MSPゴシックではなくて"ＭＳ Ｐゴシック"だったのですね・・
何回やっても、文字が変わらないから、おかしいと思っていたのです。

ありがとうございました！！

回答No.4

shockatz

「画像テキストを使う」なんて書くと、SEOやらアクセシビリティやら、いろいろ問題になりますねえ（笑

ただ、現実的には、誰もそんな面倒なことはしたくなくて、でも見た目の問題や収まりの問題があって仕方なく使うことも多いし、理念と現実は全く別次元の話というわけで。

> CSSでsans-serifを使用しています

ここが問題かなあ？
sans-serifというフォントは「ダミー」なフォントで、ブラウザでどうレンダリングされるかは環境次第です。
シェアの大多数に当たるWindowsを対象にするなら、font-familyで"ＭＳ Ｐゴシック"を指定し、画像フォントでも同じフォントを使用すれば違和感なく表示できると思います。

ただ、CSSではemやpt指定だとフォントサイズが変化するため、同じにするにはCSSも完全にピクセル指定をする必要があります。

さらには、新しいWindowsマシンのデフォルトフォントは「メイリオ」なので、こちらを使うべきなのですが、メイリオはCoolType対応のフォントなので、Photoshopでアンチアイリアスをかけてレンダリングしたものと比べると、文字のシャープさがかなり違う。
たかがテキストレンダリングの話題ですが、けっこう奥が深いです。

リアルフォントでダウンロード表示できる、「Webフォント」が一般的になるまでは、まだまだ長い時間がかかると思うので、商用サイトなら、画像文字は使いまくりでしょうね。
自分は小ポイントの画像文字なら「メイリオ」を使うことを支持します。

お礼

フォントだけで奥が深いのですね・・・
大変なんですね！！

ありがとうございます！！

回答No.2

zozokegatatu

貴方がFONTを持っていたところで、他人様が同じフォントなんてまず持っていません。
MSゴシックや明朝だってMAC環境やスマホの人は持ってませんから代替フォントですし
通常Web製作時の文字表示の指定は、標準明朝かゴシック程度の指定で、奇妙なフォントは
使いません。

どうしても独自フォントデザインを生かしたい場合は、画像表示してalt=で補足説明を入れる
方法を取ります。
またPDFで別原稿ですね。

Webページ製作は貴方の環境で見てOKではなく、全く何も入っていない素のOSのみの
機械相手に表示させて確認をするものです。

お礼

MAC環境やスマホでは、MSゴシックや明朝すらも無いのですね！！

ありがとうございます！！

回答No.1

naokita

フォント指定は利用環境によって表示が違うのはご存知でしょうか？
つまり、
自分環境でテキストと画像を同じフォントで表示できたとしても、
別のパソコンで見ると、違ったフォントで表示されるという事です。

例えば、Windowsとmacの違い・・・

貴方のパソコンでは、sans-serifを指定で、
何のフォントが表示されているのか？第三者にはわかりません・・・

フォントによっては、
フォトショのバージョン内でさえも若干違います。

お礼

フォントにバージョンがあったのですね！！
初めて知りました！！

ありがとうございます！！