HTML
1<!doctype html> 2<html lang="ja"> 3<head> 4 5<meta charset="utf-8"> 6<meta http-equiv="Content-Script-Type" content="text/javascript"> 7<meta http-equiv="content-style-type" content="text/css"> 8 9<link rel='stylesheet' href='fonts.css'> 10<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin> 11<link href='https://fonts.googleapis.com/css2?family=Palette+Mosaic&display=swap' rel='stylesheet'>"; 12</head> 13<body> 14 15<div>テスト1</div> 16<div style="font-family: 'Palette Mosaic', cursive;">テスト2</div> 17 18</body> 19</html>
CSS
1@font-face { 2 font-family: 'Acme'; 3 font-style: normal; 4 font-weight: 400; 5 src:url('acme-v11-latin-regular.woff2') format('woff2'), 6 url('acme-v11-latin-regular.woff') format('woff'), 7 url('acme-v11-latin-regular.ttf') format('truetype'), 8} 9 10 11body{ 12 font-size:50px; 13 font-family: 'Acme'; 14}
素人のため説明が下手で申し訳ないです。
WEBフォントを試そうとやってみました。
HTML、CSS、FONTファイル(acme-v11-latin-regular)
すべて同じ階層です。
ローカルテスト中で 127.0.0.1/fonts/ の階層です。
テスト1・テスト2ともに、font-size:50px; は効くのですが、
テスト1は、WEBフォントにならず。
テスト2は、WEBフォント化されます。(acme-v11-latin-regularではなく、GoogleWEBフォントです)
試しにレンタルサーバに上げてみましたが、結果は同じでした。
詳しい方お手数おかけします、ご指導お願い致します。
>";
これが影響ゼロではないでしょうけど、cssの読み込み順変えてもダメですか?
ご提示のコートを試してみましたが、問題なくフォントが反映されました。
ご提示いただいていない部分に原因があると思われます。
もちろん、グリフのない「テスト」部分はフォールバックされています、念のため。
m.ts10806 さん
ご指示ありがとうございます。
css読み込み変えてみてもNGでした。
>";
は申し訳ないです、最初PHPファイルでやっていたもんで消し忘れです…
Lhankor_Mhy さん
ご指示ありがとうございます。
やはり詳しい方では表示されるんですね!
念のためWOFF、WOFF2、TTFを違うものに変えてみましたが結果は同じでした。
fontファイルはどのようにして入手したものですか?
ご解決されて何よりです。
Lhankor_Mhy さん
お気遣いありがとうございます。
解決しましたが、フォントにつきまして
1つはリンク形式で、もうひとつはDL形式で、ともにGoogleFontでリンクもDLもできたので試してみました。
表現がおかしいかもしれませんが、ご了承ください。
初めての質問でしたが、ご丁寧に本当にありがとうございました。
日々、勉強頑張ります!
回答1件
あなたの回答
tips
プレビュー