PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
フォントの種類でレイアウトを崩さないために：font-size-adjustプロパティ - builder by ZDNet Japan
表示に使用するフォントの種類が変わると、同じフォントサイズで表示していても文字の見た目の大きさが変わってしまう。デザインによっては全体のバランスや文字の可読性が変わり、ユーザビリティやアクセシビリティにも影響してくる。 そこで、font-size-adjustプロパティを利用して、表示に使用するフォントが変わっても、文字の見た目の大きさが変わらないように設定してみよう。font-size-adjustプロパティには、これまでWindows版のFirefoxが対応していたが、Firefox 3ですべての環境のFirefoxで利用できるようになった。 フォントの見た目の大きさの違い 次のサンプルは、同じ文章をウェブページで利用される主要なフォントで表示したものだ。フォントサイズはfont-sizeプロパティで16ピクセルに設定しているが、見た目の大きさはフォントの種類によってかなり異なることが
webkit系独自のプロパティで、iPhoneやiPod Touch などで閲覧した際に、横向きにすると縦の時より自動的に文字サイズが大きくなります。 初期値は自動調整になっているので、止めたい場合などに使えます。 プロパティの解説 値 <auto>｜<none>｜<パーセント>｜inherit 初期値 auto 値の解説 <パーセント> 親要素のフォントサイズに対しての割合を%で指定します。 auto OS側でフォントサイズを自動的に調整します。 none 自動調整をしません。 text-size-adjustのサンプル body { -webkit-text-size-adjust: none; }
CSS size-adjust for @font-face Stay organized with collections Save and categorize content based on your preferences. As a web font loads, you can now adjust its scale, to normalize the document font sizes and prevent layout shift when switching between fonts Consider the following demo where the font-size is a consistent 64px, and the only difference between each of these headers is the font-fami
Webフォントの普及やフラットデザインの浸透によって、タイポグラフィにこだわるサイトが増えています。でも、フォールバックを適当に済ませていませんか？ CSSのfont-size-adjustプロパティは、font-sizeを小文字の高さで指定するプロパティです。font-siza-adjustプロパティを活用することで、Webサイトの文字を読みやすく改善できます。 本記事ではfont-size-adjustプロパティの重要性と、プロジェクトで利用する方法を解説します。 font-size-adjustの重要性 Webサイトは主に文字で構成されます。ユーザーに情報を伝えるために、タイポグラフィにこだわるのは当然のことです。適切な書体で快適に読めるWebサイトを作りましょう。使いたい書体を決めたら、次は適切なサイズを選びます。 Webサイトで使うすべてのfont-familyオプションのサイズ
Improve Web Typography with CSS Font Size Adjust — SitePoint
This article was peer reviewed by Panayotis Matsinopoulos. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! The font-size-adjust property in CSS allows developers to specify the font-size based on the height of lowercase letters instead of uppercase letters. This can significantly improve the legibility of text on the web. In this article, you will learn
Modified 2013-10-08 更新情報 -webkit-text-size-adjust プロパティの値を none から 100% へ書き直しました。「追記」 このブログをレスポンシブに変えた時に、「SyntaxHighlighter」で表示するコードの部分、しかもボックスからはみ出てスクロールが必要な場合にのみ、文字サイズが指定できないという事がありました。（レスポンシブWebデザインにする為に行った事のまとめ | memocarilog） -webkit-text-size-adjust プロパティというものがあるようで、それの仕業という事が判明しました。 webkit系の独自の仕様みたいですが、文字サイズを自動調整するCSSのプロパティで、デフォルトは「 -webkit-text-size-adjust: auto; 」となっており、モバイルサファリ等で見た時に文字サイズ
Your CSS reset needs text-size-adjust (probably) | Kilian Valkhof
I don’t get to work on a lot of new sites nowadays, but I recently got the opportunity to set one up from scratch. For most sites I built when I was still running an agency, I would use some form of CSS Reset, most often Normalize.css, but I figured that this time round I could do with a few basics, like box sizing and resetting margins on the body, and call it a day. Since browsers are pretty con
Beware of -webkit-text-size-adjust:none | 456 Berea Street
The other day I came a cross a website with text too small for me to read it comfortably. I hit Command-Plus a couple of times to make Safari bump up the text size a bit… and nothing happened. What? After some investigation of the CSS used on the site the culprit turned out to be the following CSS (don’t use): body { -webkit-text-size-adjust:none; } What that does is prevent WebKit-based browsers
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
iPhone版Safariで文字サイズがおかしくなるときは-webkit-text-size-adjust: 100%; を指定する
-webkit-text-size-adjust｜プロパティ｜CSS HappyLife ZERO
CSS size-adjust for @font-face | Articles | web.dev
文字にこだわるなら知っておきたい！CSSのfont-size-adjustの意味と使い方
モバイルサイトの文字サイズ指定の際に気をつけるプロパティ -webkit-text-size-adjust