ブラウザ上で通常のテキストを画像のように見せる方法

質問

最近、マウスを当てるとテキストなのに、どう見ても画像っぽい表示がされているサイトを目にします。
参考URL
http://trendy.nikkeibp.co.jp/article/column/20071010/1003352/?ST=digital

上記URLの「片手で簡単。ケータイ感覚で・・・」の部分がそうなのですが、どう見ても何かのフォントで作られた画像テキストなのですが、ちゃんとテキストコピーもできますし・・・
恐らくはスタイルシートが関連していると思うのですが、このような指定ができる方法ってどうやるのでしょうか？
よろしくお願い致します。

回答No.3

qualheart · ベストアンサー

CSSを辿って確認してみましたがフォントサイズは指定されていましたがフォントは指定されていませんでしたね。
単純にフォントサイズを指定してるだけです。

キレイに見えるかどうかは、OSにもよります。
Vistaなどでは画面上の文字がアンチェイリアス化されるので、キレイに見えると思います。
XPや2000では、それほどキレイに見えません。

昔に比べて画像のような文字が増えたと思うのは、お使いのパソコンをXPからVistaに変更したからではないかと推測されますが、違いますでしょうか？
もしくはブラウザで使用する標準フォントに、キレイなアウトラインデータをもつフォントに設定されてるとか。

たしかに、フォントを指定するとキレイに見えたりしますが、あくまで見る側のパソコンにも指定したフォントが入っていることが条件ですので、珍しいフォントなどを指定しても、ほとんどの人は通常のMS Pゴシック等で表示されることになります。

ちなみにスタイルシートに関しては、わたしは以下サイトをいつも参考にしてます。
http://www.tohoho-web.com/css/index.htm

お礼

有り難うございます。
最初に書いておくべきでしたが、XPを使用しております。
なぜかこのように「見える」テキストが目に付くようになり、もしかしてそのようなスタイル指定が出来るようになったのかなと・・・
私の思い過ごしだったのかも知れません。

回答No.5

nick9090

おそらく、質問者さんはご自分でサイトを作った（HTMLを書いた）経験が無いのだと思いますが、あれは「H1タグ」などを使えば、あんな感じの文字として表示されます。

単に文字サイズが大きいだけで、れっきとしたテキストです。
画像ではありません。

お礼

思い過ごしだったようです。
ありがとうございました。

回答No.4

maoo2022

＃２の補足を含めた回答です。
＊参照ＵＲＬのページ{http://trendy.nikkeibp.co.jp/article/column/20071010/1003352/?ST=digital}はＪＡＶＡを使用していますが、通常のＨＴＭＬでも同じような表示は可能です。
ただし閲覧する方にフォントがインストールされていなければ、この様な表示はされません。

◇＞＞＞単純にサイズなどのスタイルを設定しただけなのかも＜＜これについては次のＵＲＬと、タグの記入例　1:～～4:　を参照ください。
タグで文字のサイズ、フォントを指定
{見出し・文字の色・文字サイズ}
{http://hp.ms-factory.biz/html_font1.htm}

＊片手で簡単。ケータイ感覚で文字入力──「Keiboard+IE」
をフォントを変更して表示する記入例：以下1:～～4:

1:FONT-FAMILY: HGP創英角ポップ体
2:FONT-FAMILY: HGP創英角ゴシックUB
3:FONT-FAMILY: "ＭＳ Ｐゴシック"
4:FONT-FAMILY: HG丸ゴシックM-PRO; mso-hansi-font-family: "ＭＳ Ｐゴシック"

1::<p class="MsoNormal" style="MARGIN: 0mm 0mm 0pt"><span style="FONT-SIZE: 28pt; FONT-FAMILY: HGP創英角ポップ体">片手で簡単。ケータイ感覚で文字入力──「<span lang="EN-US">Keiboard+IE」<p></p></span></span></p>

2::<p class="MsoNormal" style="MARGIN: 0mm 0mm 0pt"><span style="FONT-SIZE: 28pt; FONT-FAMILY: HGP創英角ゴシックUB">片手で簡単。ケータイ感覚で文字入力──「<span lang="EN-US">Keiboard+IE」<p></p></span></span></p>

3::<p class="MsoNormal" style="MARGIN: 0mm 0mm 0pt"><strong style="mso-bidi-font-weight: normal"><span style="FONT-SIZE: 28pt; FONT-FAMILY: &quot;ＭＳ Ｐゴシック&quot;">片手で簡単。ケータイ感覚で文字入力──「<span lang="EN-US">Keiboard+IE」<p></p></span></span></strong></p>

4::<p class="MsoNormal" style="MARGIN: 0mm 0mm 0pt"><strong style="mso-bidi-font-weight: normal"><span style="FONT-SIZE: 28pt; FONT-FAMILY: HG丸ゴシックM-PRO; mso-hansi-font-family: &quot;ＭＳ Ｐゴシック&quot;">片手で簡単。ケータイ感覚で文字入力──「<span lang="EN-US">Keiboard+IE」<p></p></span></span></strong></p>

◇サンプルタグがあるほうがわかりやすいかと思い、追加回答をしました。
＊サンプルは、ペーストして確認いただければどの様なタグで、表示が変わるのかが解っていただけるかと思います。

お礼

なるほど。
有り難うございました。

回答No.2

maoo2022

こちらも同じような文字になっていると思います。
{http://www15.ocn.ne.jp/~sanin/indexgoo2022tr.html}
＊これらの文字はテキストです。
タグで文字のサイズ、フォントを指定できます。
こちらを参照ください↓
{http://www.geocities.co.jp/HeartLand-Namiki/8577/keiji.html}

＊私もブログなど書くことがありますが、最近は直接入力よりも、デスクトップでタグで書いて確認して、ＨＴＭＬの編集ページにペーストして書いてます。
どちらの方法がよいかは、意見が異なりますが・・・

お礼

有り難うございます。
単純にサイズなどのスタイルを設定しただけなのかも。

回答No.1

shimayu

どこからどう見てもテキストです。

お礼

有り難うございます。そうですね。私もそう思います。