スマホ用のサイトでフォントサイズを変えようとしても変わらない。

Question

前提・実現したいこと

スマホ用サイトで画像の上に文字を載せているのですが、スマホ用に作るとフォントサイズと太さが反映されないので反映させたい。
wordpressのtwentynineteenで作っているのですが、フォントサイズを40%から下げてみると全然小さくなりません。
試しに200%とかにするとでかくなり反映されるんですが、40%以下だと反映されません。
ブラウザの検証機能を使うとフォントウェイトに警告表示が出てしまいます。
フォントサイズはびっくりマークの警告はでないのですがフォントサイズは反映されません。

該当のソースコード

 <article class="open_text"> <img src="1100X169.png">
    <p>テストテストテストテストテストテスト<br>
      テストテストテストテストテストテスト</p>
  </article>

/*スマホ*/
@media screen and (min-width:300px) and (max-width:767px) {
  .open_text {
    position: relative;
  }
  .open_text img {
    width: 100%;
    height: auto;
  }
  .open_text p {
	 font-size:10% !important;
  　　font-weight: bold !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

試したこと

サイズをpxやvhにしてみましたがエラーのままでした。importantをつけても強制的に反映されず。

Comments

[Lhankor_Mhy]

「警告表示」とはなんですか？

[退会済みユーザー]

びっくりマークがでてfont-size:10%;が横線がひかれています。

[8-0_nyan5]

全角スペースが入っていませんか？

[退会済みユーザー]

確認しましたがCSSにもhtmlにも入ってないようです。

[退会済みユーザー]

それから横線びっくりマークはなくなりましたがフォントサイズなどの反映はされていません。

[退会済みユーザー]

と思ったらリロードとかしてるとまたフォントサイズにびっくりマークと横線が入ってしまいました。

[Lhankor_Mhy]

ホバーするとツールチップでメッセージが出ると思います。

[退会済みユーザー]

一応実機のiPhone SE2 で見てみるとこちらの思い通りのフォントサイズにはなっていたのでいいのですが、検証機能を使うとレイアウト的に困ったことになりますね。

[退会済みユーザー]

ツールチップはあとで確認してみます。

Answer 1

デバッグしているブラウザの情報がないので予想ですが、
色々ありますがざっくり、EdgeとChromeが最小フォントサイズ10pxです。
ですので４０％だと、twentynineteenのCSS設定により、元になるフォントサイズによっては10pxまでしか小さくなりません。

https://shanabrian.com/web/html-css-js-technics/css-minimum-font-size-for-browser.php

↑２次情報ですが、各ブラウザの最小フォントサイズは概ねこの様なデフォルト設定です。

Comments

[退会済みユーザー]

そうなんですね。一応検証機能の画面をはりつけます。
先ほど更新したらフォントサイズに関してはびっくりマークの横線はなくなりましたがサイズの反映はされません。

[退会済みユーザー]

Chromeです。

[kensii]

どこのフォントサイズに対してかを提示していただいたほうが早いかと思います。
iPhoneSE2が多くの場合において小さくなるはずで、設定をいじってなければPCのChromeは最小サイズは１０pxです。試しに最小を１pxとかに変えるとどうなるかですね。Chrome設定>デザインの項目あたりだと思います。

[kensii]

https://github.com/WordPress/twentynineteen/blob/master/sass/variables-site/_fonts.scss

↑によると、twentynineteenのベースのフォントサイズは22pxですね。ここを変更上書き等していないなら40%は8.8pxとなりますね。