タグ・デザイン掲示板

[

(iPhone,iOS9における)フォント変更
by ryoryo

2016-11-19 22:01
明朝フォント字体で検索してみましたが残念ながら解決しなかったため、質問させて頂きます。

サイト移転で今回 A◯ice+様よりナノ様に変えました。前回のサイトではフォント指定せずとも、フォントが明朝体系だったのですが、ナノ様はデフォルトがゴシック(？)のようで、フォントは明朝体系にしたいなと思い、フォント変更を試みてみました。
が、当方がやった方法ではどれも適応されず、明朝体にはなりませんでした。
ナノ様では明朝体系の表示ができないのでしょうか？フォント指定しても、適応されないのでしょうか？

もし、ナノ様でも明朝体利用出来るようでしたら、どのようにすれば明朝体表示にできるか教えて頂きたいです。また、下記に間違いがあれば教えて頂きたいです。

当方は全てiPhoneで作成しており、iOSは9です。当掲示板の回答で明朝表示されているサイトのhtmlを抜き出して…とありやってみまさたが、そもそもフォントに対する記述がありまさんでした。

また、以下は試してみたものになります。
フォント名はMS P明朝、MS 明朝とserifにしてます。

・body…ナノ様でいう全体レイアウト
<font face="フォント名">本文またコンテンツ</font>
※文字に対するhead記入なし

・<style>要素をhead組み込み
(head内)
<style type="text/css"></style>

(body内…ナノ様でいう全体レイアウト)
<p>
本文またコンテンツ
</p>

・style属性で直接スタイルシート適応
(head)
<meta name="Content-Style-Type" content="text/css">

(body)
<p style="font-family:'フォント名'">
本文またコンテンツ
</p>

・div#font利用
(head)
<style type="text/css">
div#font{font-family:"フォント名";}
</style>

全体レイアウト内)
<div id="font">
本文またコンテンツ
</div>

自分で他htmlサイトなどから引用し試したものは以上になります。
他、この掲示板にて、字体フォントで調べ出てきたもののうち形状が異なるものは全てコピペし、専用に子ページを作り、フォントのみ指定し、試しましたが、字体は変わりませんでした。

pc
[編集]

by ax

2016-11-19 22:41
失礼ですが、そもそもwebフォントでない限り閲覧している端末のフォントを利用して表示するのだということは理解していらっしゃいますか？

pc
[編集]

by ryoryo

2016-11-19 22:53
ax様

はい、理解はしているつもりです。
なので、こういうタグを利用して違うフォントで閲覧できるフォントを探しました。
自分がiPhoneでしたのでiPhoneで閲覧する際表示できる明朝体の字体、フォントを調べた結果、MS明朝、ヒラギノ明朝、serif、が出てきましたのでそれを引用しました。

私の端末、iPhone6(iOS9)で検索する限り明朝表示のサイトもありましたし(ナノ様では見たことはなし)、フォントの指定次第ではナノ様でも明朝体にすることも可能だと踏んで行っていました。

pc
[編集]

by 一般民

2016-11-20 00:43
私のやり方ですが、
!DOCTYPEにstyle要素を入れ、他と同じようにレイアウトに組み込めばできると思います。

まず、!DOCTYPE欄にこれを入力して
<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">

</style>
</head>

次にレイアウト側に
<p style='font-family:"フォント";'>テキスト</p>
これを組み込むことでフォント変わるはずです。
明朝にしたいのならserifにするのがベストかと。

もしくは共通headに先程の!DOCTYPE打ち込むだけでも出来たはずです

pc
[編集]

by 匿名

2016-11-20 07:11
↑の方の方法には問題があります。
DOCTYPE欄に書けるのはDOCTYPE宣言だけです。
<html ～>や<head></head>等は自動で出力されますから↑だと重複するばかりか<html～>が閉じられていないタグミス状態になります。

HTML5の文書型宣言を書くなら以下のようにします。
・DOCTYPE欄
<!DOCTYPE html>
・<html>欄
<html lang="ja">

ご質問については
・HEAD内
<style type="text/css">
div#font{
font-family:serif;
}
</style>
・レイアウト
<div id="font"></font>

・<font face～></font>は既に非推奨タグなので使わない方が良い
・<p></p>は段落を表すタグなので広い範囲を囲むのは適していませんが必要に応じて使い分けてください

"フォント名"と伏せられてしまっているため反映しない原因がわかりませんが、↑の方のご指摘のとおり、まずはserifのみで試し、反映されるようならW3Cの仕様書やCSS支援サイト様等で書き方を詳しく調べてからフォントファミリー名を増やしていく方法をお勧めします。
serifとは何か、についても把握しておいた方が良いと思います。
(ちなみにiPhoneの明朝体はヒラギノ明朝、MS～はwinのフォント)

＊編集しました

pc
[編集]

by ryoryo

2016-11-20 10:26
匿名様
フォント名の部分は"ヒラギノ明朝","MS 明朝",serifの順番に指定しています。

ご指摘頂きました、#div#font{}のものですが質問文の記入ミスです。失礼致しました。
実際には
<style type="text/css"></style>
で囲んでいます。
serifだけ、また上記三つで並べた場合でも反映はされませんでした。
Pとfont faceについて教えて頂きありがとうございます。そういうことだったのですね

一般民様
DOCTYPEに打ち込んでも出来なかったのですが、
共通headに打ち込んでみましたら全ページ明朝体になりました。
ありがとうございます。

pc
[編集]

[