HTML中でアウトラインフォントを使用する方法の質問

自分のホームページを作成するために教えていただきたくおもいます。

数年前から多くのホームページでアウトラインフォント？　で見れることが多くなりました。特に、きれいだなと感じるのは、見出しのＨxタグ(h1 h2 h3・・・など)に含める文字です。
ギザギザの文字では品質がいまいちです。

私も綺麗なギザギザのない文字でホームページを作成したいとおもいますが、画像で作成するよりも出来れば、テキスト文字のフォント指定でできればいいなあと思っています。

そこで質問なのですが、綺麗なギザギザのないフォントで表示させる方法を教えていただきたくよろしくお願いします。

疑問点は、あれらは、一般的には、

ＰＣ内臓のフォントによるのか？それともサーバーにおいてあるのか？
フォントの指定はどうやっているのか？　ヘッド内の指定方法は？　
ＣＳＳでの指定でやるのか？
それとも他の方法なのか？
ＸＨＴＭＬ1.1でも出来るのか？

などです。　実際のやり方のポイントを教えていただけますと助かります。
よろしくお願いします。

No.4 ベストアンサー 回答者： ORUKA1951 回答日時： 2015/10/28 19:17

>ギザギザの文字では品質がいまいちです。

　それはないでしょう。(^^)ひょっとしてテキストを画像で表示している。??。それがない理由は今から１５年以上も前のTML4.01の勧告(1999年)以来
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
・メーカー独自拡張のHTMLを使う。
・テキストを画像に置き換えて表現する。
・余白制御のために画像を用いる。
・ページレイアウトの目的で表を用いる。
・HTMLでページを作らずにプログラムに頼る。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　と強く否定されてきた事です。

>ＸＨＴＭＬ1.1でも出来るのか？
　いまさらXHTMLなんて使わなくても・・・先祖がえり・・・
　2008年の古い記事ですが「HTML5が持つ本当の意味 － ＠IT( http://www.atmarkit.co.jp/news/200801/25/html.html )」を読んでおかれると良いです。

>ギザギザの文字では品質がいまいちです。
>私も綺麗なギザギザのない文字でホームページを作成したい
　あなたの最も大きな誤解は、この一点に尽きるような気がします。
　HTMLとは、『HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』も全文を読んで理解してください。

　HTMLはワープロやIllustratrなど印刷物を作るための仕様ではありません。IEやFirefx,Chromeで見るだけでなく、印刷したり、視覚障害者がスクリーンリーダーで読んだり、点字端末で点字を打ち出したり、googleなどの検索エンジンが理解できる・・・それが最大の目的なのですよ。そうでなきゃ、adbe Illustratorで高解像度のページを作成して、.aiで保存すれば良い。
　てもそれじゃウェブではない。特定のOSの特定のバージョンの特定のアプリケーションでないと利用できなくなる。

　いまどき見出し要素を画像に置き換えることは、さすがにされていないと思いますが
・・・・「ギザギザの文字では品質がいまいちです。」ひょっして画像を使ってこられた。
　なら回避方法は大きな画像を縮小して表示させておく。---データ量も増えるし、ブラウザの処理時間もかかるし・・いいことないですが。

　それをおいて、テキストを画像で置き換えていない場合は、
h1{font-family:"ＭＳ Ｐゴシック",Osaka,serif;}
と指定してこられたはずです。
　この場合は「ギザギザの文字」にはなりません。
　このように、ユーザーのパソコンでもっているだろうfont-family名を羅列してきました。
　しかしそれでは限定されますので、そこでフォントをウェブ上に置いて、それを利用できるようにします。
　CSS3でfnt-faceプロパティが導入されました。
>ＰＣ内臓のフォントによるのか？それともサーバーにおいてあるのか？
　サーバーにおきます。

>フォントの指定はどうやっているのか？　ヘッド内の指定方法は？
　フォントへのリンクをスタイルシートの前にリンクさせておきます。　
>ＣＳＳでの指定でやるのか？
　ウェブフォントへのリンクはhead内の<link>要素で
　実際にどのフォントを使用するかは従来どおりスタイルシート内でfont-familyやfont-faceです。

この回答へのお礼

回答ありがとうございます。

英語のサイトではいろいろなフォントが使用されているのでそういうつくりのサイトを見ているとＨＴＭＬ５はすごいとおもいました。

html5 とｃｓｓ３　により何かできるように変わっているんですね。
今後は、フォントをＨＴＴＰサーバにＵpしてＣＳＳ３とＨＴＭＬ５内の指定により共通のフォントをそれぞれのブラウザで表示できるような仕組みを構成したいとおもいます。

お礼日時：2015/10/28 23:49

No.3 回答者： ORUKA1951 回答日時： 2015/10/28 08:28

>数年前から多くのホームページでアウトラインフォント？　で見れることが多くなりました。

それ違います。
・・・今から出かけるので正しい説明は後で

No.2 回答者： kmee 回答日時： 2015/10/28 08:00

表示は、最終的にはその表示している環境(ブラウザ、OS、PC/スマホ等と、それぞれの設定)に依存します。

制作者が「滑かな文字で」と意図して作っても、誰でもその通りに表示されるとは限りません。


最近では、WEBフォントと言って、WEB上にあるフォントを使う、という方法もあります。
ただ、その分データ量が増えるので、使わないように設定している場合があります。

多くは、PCやスマホにインストールされているフォントを使っています。
インストールされていなければ、代りのフォントが使われます。


WEB側でフォントを指定するには、スタイルシートを使います。
過去には、HTMLのFONTタグもありましたが、現在は使いません。

ユーザー側では、ブラウザの設定でフォントを変えることができます。
また、ユーザー側が用意したスタイルシートをWEBの指定より優先的に使うようにすることもできます。


WindowsではMSゴシックやMS明朝が標準で使われるようになっていると思います。
これらのフォントにはビットマップフォントという、あなたの言う「ギザギザ」の文字が埋め込まれていて、特定のフォントサイズでは、こちらの「ギザギザ」が優先的に使われます。
※ これはこれでメリットもあるのですが。
h1タグ等は大きめな文字になっていることが多く、そのため、MSゴシックにしていてもビットマップフォントではなく滑かな方が使われます。

ブラウザの設定で、フォントを変えるだけで「ギザギザ」ではなくなります。

この回答へのお礼

回答ありがとうございます、参考にさせていただきます。

お礼日時：2015/10/28 20:45

No.1 回答者： mai3456 回答日時： 2015/10/27 20:37

WEBフォントといって、ブラウザー上で指定するんです。

詳しくはWEBフォントで検索してみてください。
または、MSゴシック系はギザギザしますから指定を避けるべきです。

この回答へのお礼

ＭＳゴシック系がギザギザするというご指摘をありがとうございます。
参考にさせていただきます。

お礼日時：2015/10/28 20:46