以前の「Flutterのデフォルトのテキストとフォントの知識ポイント」と「Flutterのフォント「コールド」知識の詳細な理解」では、Flutterのフォントに関する興味深い知識ポイントがたくさん紹介されており、この記事は続きますFlutterTextに関する：実際FontFeature、Flutterと比較して、この記事の内容はフロントエンドまたはデザインとより密接に関連している可能性があります。
この記事は間違いなく
FontFeatureFlutterについて見ることができる数少ない資料の1つだと思います。
それは何FontFeatureですか？簡単に言えば、フォントの形状に影響を与える属性です。フロントエンドの対応するフィールドでは、フォント内の単語の形状を指定するために使用されるパラメータfont-feature-settingsとは異なります。FontFamily
下の図に示すように
frac、tnum分数とテーブル番号のコントラストレンダリング効果は、フォントライブラリを追加せずに特殊なレンダリングを実現Featureでき、特性の意味もあるため、フォント特性としても理解できます。
Roboto FlutterはデフォルトでAndroidのフォントを使用し、iOS のフォントを使用することはわかっています SF が、実際には多くの種類のRobotoフォント。たとえばsystem/fonts、携帯電話のディレクトリに移動すると、多くのフォントライブラリがあることがわかります。Roboto言葉で。
したがってRoboto、などのフォントライブラリは多数のフォントのセットであり、異なるフォントは異なるフォントにfont-weight対応しますttf。たとえば、デフォルトRobotoではfont-weight、600の構成はサポートされていません。
下の図に示すように、w400-w700を設定weightすると、中央の500と600が実際には同じ厚さであることがはっきりとわかります。したがって、 UIを設定weightまたは設計するときweightは、目的の効果が異なるプラットフォームでサポートされているかどうかを考慮する必要があります。 。。
FontFeature上記に戻りRobotoますが、デフォルトでサポートしている機能はいくつありますか？答えは26種類で、コードは下に、実行後の効果も下の図に示します。日常使用の観点から、これらの26種類の機能は基本的に開発のニーズのほとんどを満たしています。
"c2sc"、 "ccmp"、 "dlig"、 "dnom"、 "frac"、 "liga"、 "lnum"、 "locl"、 "numr"、 "onum"、 "pnum"、 "salt"、 "smcp"、 "ss01"、 "ss02"、 "ss03"、 "ss04"、 "ss05"、 "ss06"、 "ss07"、 "tnum"、 "unic"、 "cpsp"、 "kern"、 "mark"、 "mkmk"
而 iOS 上的 SF pro 默认支持 39 种 Features ， 它们的编码如下所示，运行后效果也如下图所示，可以看到 SF pro 支持的 Features 更多。
"c2sc"、 "calt"、 "case"、 "ccmp"、 "cv01"、 "cv02"、 "cv03"、 "cv04"、 "cv05"、 "cv06"、 "cv07"、 "cv08"、 "cv09"、 "cv10"、 "dnom"、 "frac"、 "liga"、 "locl"、 "numr"、 "pnum"、 "smcp"、 "ss01"、 "ss02"、 "ss03"、 "ss05"、 "ss06"、 "ss07"、 "ss08"、 "ss09"、 "ss12"、 "ss13"、 "ss14"、 "ss15"、 "ss16"、 "ss17"、 "subs"、 "sups"、 "tnum"、 "kern"
所以可以看到，并不是所有字体支持的 Features 都是一样的，比如 iOS 上支持 sups 上标显示和 subs 下标显示，但是 Android 上的 Roboto 并不支持，甚至很多第三方字体其实并不支持 Features 。
また、Webにはさまざまな制限があります。たとえば、
swsh（花の本体）は基本的にデフォルトでブラウザをfwidサポートnlckしていません、、Safariブラウザをサポートしていません。
興味深いことに、Flutter Webにはテキストがぼやける問題＃58159があります。この問題はまだ正式には修正されていませんがText、FontFeatures任意に設定することでこの問題を修正できます。
ぼやけは通常、テキストを描画するために
canvasラベル、TextコントロールfontFeaturesにが含まれている場合は、問題を回避するためにレンダリング用に<p>+<span>に設定されます。
最後に、FontFeatureにまだ興味がある場合は、次の情報から詳細を知ることができます。フォントについて質問がある場合は、ディスカッション用のメッセージを残してください。
-
より多くの種類の機能について知りたい場合は、 en.wikipedia.org / wiki/List_o…で詳細を学ぶことができます。
-
フォントがサポートする機能に興味がある場合は、wakamaifondue.comで詳細を確認できます。