『SHOP OF CSS』スタッフ専用連絡板

メッセージ一覧

質問
フォントを使っても、何故か反映されません。他の方の作品では反映されているので、機種の問題ではないと思うのですが……。わかる方いたら教えてください。
生きてます

雑占い (プロフ) [2022年2月20日 13時] [固定リンク] PCから [違反報告]

ソースをコピペするのを間違ったとかはないですかね? それが一番確率が高いのですが……
『.』このようなもの一つ欠けただけでも反映されないことはよくありますから……

バニランテ@SHOP OF CSS (プロフ) [2022年2月20日 14時] 1番目の返信 スマホ [違反報告]

バニランテ様もおっしゃっていますが、それ以外にも考えられる原因はいくつかあります。


まず一つに、フォントをleafscape様などの外部からお借りした場合です。
※占いツクールのフォント設定は本来の書き方と違います。

leafscape様では
@font-face{
font-family:○○フォント;
src: url('https://~')
format("woff2");
}
と書かれていても、占いツクールでは
@font-face{
font-family:○○フォント;
src:url(https://~);
}
のように書かないと変換されません。


二つ目に、占いツクールでの配布サイトを使用した場合です。
占いツクールのフォント配布では、基本的に
/*-------
配布元様(https://~)
ライセンス(https://~)
再配布(https://~)
------- */
みたいなものがありますよね?
それの/* */ 部分が少しでも欠けていると、その直後にあるソースは反映しなくなります。

何も、これだけに限ったことではなく、/**/ が使われている場所のどこかが欠けるとその直後のソースは反応しなくなります。


三つ目に、そもそも設定をしていない場合です。
@font-face{
font-family:○○フォント;
src:url(https://~);
}
と、例えこのように書かれていても、それだけではフォントは反映されません。

※@font-faceは、CSSで使いやすくするため、わざわざ名前をつけている感じです。
ですから、それに追加して、
*{
font-family:○○フォント !important;
}
というのを書かなければなりません。
このフォント、○○フォントって言うんだよ! と言われても、CSSはこのフォント使ってね! ということではないな、と判断してしまうのです。


四つ目は、圧縮時の変換です。
全てがそうか分かりませんが、私の使っているCSS圧縮サイトは、ウェブフォントの(https://~)というURLを、(http://~)に変形してしまいます。

たった一文字、s が抜けただけですが、バニランテ様の言う通り、それでもCSSは反応しなくなります。
CSSはとても繊細なのです。


私が思い付くのはこれだけです。
この4つ、一度確認してみてはいかがでしょう?
長文、大変失礼しました。
雑占い様、よきCSSライフをお送りくださいませ!

十五夜シロノ(十六夜シロ*サブ) (プロフ) [2022年2月24日 13時] 2番目の返信 スマホ [違反報告]

確認いたしました。確認したところどうやらおそらくコピーする場所がずれたなどのように思われます。的確なアドバイスありがとうございました!

雑占い (プロフ) [2022年2月27日 14時] 3番目の返信 PCから [違反報告]
メッセージ返信
メッセージの一覧に戻る
(C) COMMU