Android の進歩への道 - シンプルなフォントとフォント ライブラリ

そのとき、グループはフォント ライブラリを変更するというリクエストを一時的に受け取りましたが、このリクエストは比較的簡単なものでした。なぜなら、他に手元にあるものがあり、私はこれまでフォント ライブラリを変更したことがなかったため、同僚にそれを渡しました。今は自分を豊かにする時間ができました(書いたことはすべて正しいとは限りません。不足があれば直接指摘して話し合ってください)

在正式开始以前,你首先需要告知产品经理和设计师,因为引入新的字体库存在版权问题,需要对方授权方可使用,否则涉及侵权;如果产品确定一定要改的话,请产品和设计提供相关字体库

始める前は、フォント ライブラリの基本バージョンについて記事を書くとは思っていませんでした。どんどん書き進めるのに 2 日かかりました。また、新しいものから古いものまで、十数のブログも参照しました。この記事がお役に立てば幸いです。

Look: この記事を読んだときにフォント ライブラリ関連のコンテンツについて学んだかどうかはわかりませんが、まず知識を求める際に私が遭遇した問題について話させてください。

Android のデフォルトのフォントとは何ですか? なぜ、ある人は「はい」と言いSource Han Sans(思源)、ある人は「はい」と言いRoboto、ある人は「はい」と言うのでしょうDroidSans、DroidSansFallback か?

この質問に関して、私はたくさんの記事を読みましたが、答えはすべてパッチワークで似ており、比較的完全な説明はありません。最終的に、私は合理的な説明を見つけるために外に出ました。それを統合してみます (ヒント:もっと学びたい、個人的な興味がある場合は、基本的な認識に進んで理解を続けることができます。議論することを歓迎します~)

まず第一にSource Han Sans(思源)、 、RobotoDroidSans、DroidSansFallback フォント、およびフォント ライブラリはすべて存在しており、それらはすべて Android システムに存在します。

その中で、Source Han Sans(思源)中国語環境と中国、日本、韓国に適しており、Roboto英語と数字に適しており、DroidSans、DroidSansFallback中国、日本、韓国以外の国に適している、またはバックアップ (デフォルト) フォントとして適しています故知道国内用的是思源字体库+Roboto字体库即可

ビジネス要件と実装

新しいフォント ライブラリの導入と使用は非常に簡単です。ビジネス ニーズだけであれば、この段落を読むだけで十分です。興味があり、十分な時間があれば、読んでください~

ビジネスニーズ

ですのでUI的设计需求、主に設計図の関連データ情報を見ます。

UIレンダリング

ここに画像の説明を挿入

font-family (フォント ライブラリ): Roboto-Medium;

ここに画像の説明を挿入

Hint:根据设计图可以看出使用到的主要是 Roboto字体中的 中等加粗字体

ビジネスの実現

静态实现(xml)和动态实现(代码设置)フォントライブラリ事業の導入に関して、具体的には を中心に導入を見ていきました。使用哪种方式取决于自己和业务场景的使用

この 2 つの方法はフォント ライブラリの保存場所が異なるため、知識を求めるための小さな教室を設置する点で简单说明res、assets類似点と相違点があります。

同じ点: 2 つのディレクトリ内のファイルは次のとおりです。打包后会原封不动的保存在apk包中,不会被编译成二进制

違い:

  • リソースの参照方法が異なります。res/rawのファイルは R.java ファイルにマッピングされ、アクセスする際にはリソース ID、つまり R.id.filename が直接使用されます。assetsフォルダー下のファイルはマッピングされません。 R.java、およびアクセスされる WhenAssetManagerクラスが必要です。
  • 別の扱い
  • サブディレクトリは異なります。res/rawディレクトリ構造は存在しない可能性がありますが、assetsディレクトリ構造は存在する可能性があります。つまり、アセット ディレクトリの下にフォルダを作成できます。

提供されたフォントライブラリによると、解凍後のAndroidStudioプレビュー効果を直接確認できます。

ここに画像の説明を挿入

総合的な実現効果

2 つの実装方法の効果は統合されていますが、静的実装はプレビューをサポートしているため、レンダリングは統合されています。

ビュー効果は次の 3 つのカテゴリに対応します (実際には大きな違いはわかりません。デザインが区別しやすいだけかもしれません)

  • 默认字体
  • Roboto 普通字体
  • Roboto 加粗字体
    ここに画像の説明を挿入

静的実装

静的実装の利点は、使いやすく、属性を直接設定できると同時に、設定の効果を直接観察できることです。欠点は、製品が特定のビジネス シナリオを必要とし、動的に属性を切り替える必要があることです。コントロールのフォント効果 (数千の人物と数千の顔)

  1. res - 创建 font 文件夹フォントライブラリを保存するために使用されます
    ここに画像の説明を挿入
  2. フォントライブラリに関するコマンドは準拠する必要があります命名规范(動的実装と比べて命名が異なります)。

名前を間違えた

ここに画像の説明を挿入

正しく使う

1

xml参照フォントライブラリ

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:text="0.00" />

    <TextView
        android:id="@+id/tv_text1"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:fontFamily="@font/roboto_regular"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="0.08" />

    <TextView
        android:id="@+id/tv_text2"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:fontFamily="@font/roboto_medium"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="66.66" />

</LinearLayout>

プレビュー効果

ここに画像の説明を挿入

動的実装

動的実装の方法は静的実装とは少し異なり、1つ目はリソースの格納場所、2つ目はフォントライブラリの設定方法です。

  1. assetsフォルダーを作成すると
    ここに画像の説明を挿入
    AndroidStudio自動的にプロンプ​​トが表示されます
    ここに画像の説明を挿入
  2. フォルダーの下に、主にフォントassetsライブラリを保存するために使用されるフォルダーを作成します。fonts
    ここに画像の説明を挿入
  3. フォント ライブラリは通常ttfファイルであり、次のようにここにフォントを配置できます。
    ここに画像の説明を挿入

呼び出しメソッド

一般設定

package com.example.kotlindemo

import android.annotation.SuppressLint
import android.graphics.Typeface
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    
    
    @SuppressLint("MissingInflatedId")
    override fun onCreate(savedInstanceState: Bundle?) {
    
    
        super.onCreate(savedInstanceState)
        setContentView(R.layout.want_text_display)

        var t1 = findViewById<TextView>(R.id.tv_text1)
        val regular = Typeface.createFromAsset(assets,"fonts/Roboto-Regular.ttf")
        t1.typeface = regular;
    }
}

通常、1 つのコントロールは同じフォント ライブラリ スタイルを使用します。ここでは 2 つのコントロールの設定方法を示します (設定方法は同じです)。2 つのフォント ライブラリのスタイルを引用したため、もう 1 つだけ書きました。一个为roboto普通字体,一个为roboto加粗字体

package com.example.kotlindemo

import android.annotation.SuppressLint
import android.graphics.Typeface
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    
    
    @SuppressLint("MissingInflatedId")
    override fun onCreate(savedInstanceState: Bundle?) {
    
    
        super.onCreate(savedInstanceState)
        setContentView(R.layout.want_text_display)

        var t1 = findViewById<TextView>(R.id.tv_text1)
        var t2 = findViewById<TextView>(R.id.tv_text2)

        val regular = Typeface.createFromAsset(assets,"fonts/Roboto-Regular.ttf")
        val medium = Typeface.createFromAsset(assets,"fonts/Roboto-Medium.ttf")

        t1.typeface = regular;
        t2.typeface = medium;
    }
}

want_text_display

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:text="0.00" />

    <TextView
        android:id="@+id/tv_text1"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="0.08" />

    <TextView
        android:id="@+id/tv_text2"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="66.66" />

</LinearLayout>

メモとして残しておきます

以前ブログを読んで、ElegantTextHeightプロパティを設定しないと高さが変わってしまうという内容を読んだのですが、該当する場面に遭遇していないので、改めてメモとして残しておきます。

// 应用字体
var typeFace = Typeface.createFromAsset(mContext.getAssets(),"fonts/sourcehanserifcn_regular.otf")
//这个不可缺少,不加tvtext高度变大很多  很不美观
tvtext.setElegantTextHeight(true)
tvtext.setTypeface(typeFace)

基本的な認知

Androidには独自の があります默认字体库が、そのため国内厂商较多,大多都会定制化字体表示効果が異なり、フォントも完全に統一されていないことがほとんどです。

针对于我们常见的中文、英文、数字使用的字体库也有所不同

Androidのデフォルトフォント

  • 中国語フォント: Source Han Sans / Noto(四元太字)

Wikipedia: Source Han Sans (英語: Source Han Sans、「四源」という言葉は、「水を飲みながら源を考える」という慣用句に由来します) は、Adobe と Google によって開発されたオープンソース フォント ファミリです。バージョン 1.001 以前は、以下でライセンスされています。 Apache 2.0 ライセンスは、1.002 以降のバージョンでは、サンセリフ太字に属する SIL オープン ソース フォント ライセンスを使用します。Siyuan HeiTi は、2014 年 7 月 16 日に初めてリリースされました。繁体字中国語、簡体字中国語、日本語、韓国語をサポートしており、それぞれ 7 つのフォント ウェイトがあります。出版当時は、OpenType フォント技術の限界である 65,535 グリフに 44,666 文字が属する、当時としては最も文字数の多いフォントでした。

  • 数字と英語のフォント:Roboto

小さな教室

DroidSansFallbackと は思源黑体2 つの異なるフォントであり、Android システムでは異なる機能とアプリケーション シナリオを持っています。

DroidSansFallback :DroidSansFallback用の Android システムのフォント ライブラリです支持多语言和字符集的显示これにはUnicode、一部の珍しい文字や言語のグリフを含む、広範囲の文字が含まれています。システムが特定の文字を表示するための適切なフォントを見つけられない場合、システムはDroidSansFallbackフォールバック フォントとして使用します。これにより、デフォルトのフォント ライブラリ (Roboto など) に対応する文字が含まれていない場合でも、Android で複数の言語と記号を表示できるようになります。

Android Android システムのデフォルトのフォントは次のとおりです。

  • Clockopia.ttfシステムのデフォルトのスタンバイクロックフォント。
  • DroidSansFallback.ttfシステムのデフォルトの中国語フォント。
  • DroidSans.ttfシステムのデフォルトの英語フォント。
  • DroidSans-Bold.ttfシステムのデフォルトの英語の太字フォント。

Siyuan Heiti : Siyuan Heiti は、中国語、日本語、韓国語 (CJK) 言語の表示をサポートするAdobeためにGoogle共同開発されたオープンソース フォントです。漢字、かな、ハングル文字を含み、広範囲をカバーします。Siyuan のブラックフェイスは、さまざまな画面サイズや解像度に適応しながら、フォントの明瞭さと読みやすさを維持するように設計されています。一部の中国語、日本語、韓国語環境では、Android システムは対応するテキスト コンテンツを表示するためのデフォルト フォントとして Siyuan HeiTi を使用します。

どのフォント ライブラリを使用する場合でも、一般的なフォント ライブラリでは、標準フォント、太字などのさまざまなスタイルのフォントが提供されます。Regular、Italic、Bold、Bold-italic、Light、Light-italic、Thin、Thin-italic、Condensed regular、Condensed italic、Condensed bold、Condensed bold-italic

チームメイトとして理解する必要があるIOS 默认字体

  • 中文字体:PingFang SC
  • 数字と英語のフォント:.SF UI Text、.SF UI Display

2 枚の写真をサイレントコピーする

ここに画像の説明を挿入

中国語フォントと比較してみるとよくわかります平方对比思源黑体,笔画更细、字怀更大、字体使用弧度更少,偏旁所占字面更小(正直デザインを見ないと基本的にあまり違いが分かりません…)。

ここに画像の説明を挿入

Roboto フォントについての補足説明

这部分内容是看百度发的一篇blog借鉴于此的(偏官方简介),仅做了解即可,无需细读,以下介绍均针对于Android客户端

フォントの特徴

  • 清晰的字形: Roboto フォントはグリフが非常に明確なので、読み書きが非常に快適です。
  • 可读性强: Roboto フォントは可読性に優れているため、ほとんどのアプリケーションで適切に動作します。
  • 平衡的间距:Robotoは行間のバランスも良いですね。これは、画面上のテキストのレイアウトが非常に均一であり、非常にきれいに見えることを意味します。
  • 广泛的可用性: Roboto フォントはオープンソース フォントであるため、Android オープンソース プロジェクトで広く使用されています。これにより、さまざまなデバイスや画面解像度で適切に動作します。

フォントの利点

  • 看起来专业: Roboto フォントを使用して、アプリケーションをよりプロフェッショナルな外観にします。鮮明なグリフとバランスの取れた間隔により、画面上のテキストがより鮮明に見えます。
  • 提高可读性: Roboto フォントの優れた可読性のおかげで、読み書きが非常に快適になり、アプリケーションの操作性も向上します。
  • 减少屏幕分辨率变化: Roboto フォントはさまざまなデバイスや画面解像度で適切に動作するため、アプリケーションはさまざまな画面サイズに適応することに大きな影響を与えません。
  • 延长设备电池寿命: いくつかの研究では、Roboto フォントを使用するとデバイスのバッテリー寿命が向上することが示されています。これは、フォントを暗くすると画面の明るさの必要性が減り、バッテリーの消耗が軽減されるためです。

フォントが足りない

  • 应用程序的可读性降低注:アプリケーション内のテキストに異なるフォントが使用されている場合、アプリケーションが読みにくくなる可能性があります。
  • 应用程序的可用性降低注:アプリケーション内のテキストに Roboto フォントが使用されており、デバイスの画面解像度が低い場合、アプリケーションの操作性が低下する可能性があります。
  • 设备电池消耗增加: Roboto フォントの使用がデバイスのバッテリー消費量の増加につながる可能性があることを示す研究がいくつかあります。これは、フォントが濃いと画面の明るさに対する要求が高まり、バッテリーの消費量が増加する可能性があるためです。

メーカーフォント

MisansAndroid 自体のカスタマイズ性が高い 初期のフォント変更には基本的に root が必要であった 現在では携帯電話にもこの機能が搭載されており、各メーカーに十分な権限が与えられている 独自フォント 国内メーカーの多くは、 、OPPO SANSHarmonyOS Sansなどの独自フォントを持っている他の携帯電話メーカーのデフォルト フォント。これらのフォントは中国語表示だけでなく、西洋言語(英語など)も完璧に表示できます。

主要な携帯電話メーカーのデフォルト フォントの紹介を記事で見ましたが、ここでは重要な情報の概要をいくつか示します。

この友人は、フォントが良い場合は、文字数が多いこと(珍しい文字に注意するため)、フォントのウェイトが揃っていること(太さが均一であること)、OpenType の 3 つの側面に注意する必要があると述べました。サポート(文字は状況に応じて自動的に調整され、より美しく見えます。)

主流の 3 つのフォントのうちどれが見栄えが良いかを見てみましょう。ここでもう一度説明しますが、これら 3 つのフォントは Hanyi によってカスタマイズされており、すべてのフォントが携帯電話メーカーによってカスタマイズされているわけではありません。

ミサン

MIUI13内で宣伝されているまったく新しいシステム フォントではMiSans、中国語、英語、デジタルのデザインが完全に最適化されており、シンプルなフォント、鮮明な視界、快適な読書が可能です。

実はこれMiSans、 です黑体的变种こちらも黒ですが、細部にまで頑張っているのがわかります

  • ペンはまっすぐで強いです
  • シンプルなデザイン
  • 視覚的な負担を軽減
  • 画面表示がより容易になります
  • OpenType機能をサポート

MiSan出てくるとすぐに、特に長文や句読点のある一部のシーンでは、いわゆる高級感が強くなっているのが明らかで、それに比べるとHongmengフォントは少し平凡に見えます。

ファーウェイ (HarmonyOS Sans)

  • より多くの言語をサポートします。
  • イタリック体と繁体字中国語用に特別に強化されたフォントがあります。
  • 中国語と英語が混在しており、テキストと句読点も非常に優れており、露骨な間違いはありませんが、単語の重みはXiaomi MiSansよりも少なく、6種類の重みのみです。

OPPO(オッポサンズ)

  • 真新しいスケルトン
  • 宮殿内の自然な快適さ
  • 安定した構造
  • フォントストレッチ
  • 画面表示の読みやすさと美しさの向上

主利息

Android フォントの仕組み

Android フォントは、 、 、およびシステム フォントによってandroid 2D图形引擎skia実装されますZygotePreloading classesload

関連するファイルは次のとおりです。skTypeface.cppskFontHost_android.cpp、後者は ですskia针对android平台字体实现的port主な変数は次のとおりです。

struct FontInitRec {
    
    const char*         
fFileName;const char* const*  fNames;     
// null-terminated list};struct FamilyRec {FamilyRec*  fNext;SkTypeface* fFaces[5];};
//uint32_t gFallbackFonts[SK_ARRAY_COUNT(gSystemFonts)+1];load_system_fonts()@skFontHost_android.cpp 

システム内のすべてのフォントをロードし、各フォントに固有の ID を割り当て、フォントを と の 2 種類に分けFamilyFontsFallbackFonts最終的にskPaintアプリケーションで設定したフォント ( )Typefaceに対応する ID によって文字の表示を実現します。

Android のデフォルトの中国語フォントを置き換える

androidシステムではDroidSans欧文のみを含むデフォルトのフォントです アプリケーションではデフォルトで呼び出されますが、DroidSansFallback東アジアの文字も含まれます 表示する文字がDroidSansフォント内に存在しない場合(漢字など) 、対応するエンコード文字がありません。システムはDroidSansFallback対応するコードの文字を検索します。見つかった場合は、そのDroidSansFallbackフォントを使用して表示します。コードに対応する文字がまだ見つからない場合、その文字は表示できません。スクリーン。

sans”,“serif”,“monospace「 」のような、Android システムのデフォルトのフォントを追加します。

Android システムには、デフォルトの中国語フォントが 1 つだけあります。DroidSansFallback.ttfAndroid アプリケーションで希望の中国語フォントを設定したい場合は、アプリケーションのアセット ディレクトリからフォント ファイルをインポートするだけでなく、Android のデフォルト フォントを追加することもできます。フォントを実現する方法。追加する手順は大まかに以下のとおりです。

  1. frameworks/base/data/fontsディレクトリの下にフォント ファイルを追加します。Driod-kaishu.ttf:
  2. に楷書のフォントを追加しますskia。変更が必要なファイルは主に次のとおりですskFontHost.cpp、skTypeface.cpp、Typeface.java
  3. 通常のスクリプト フォント関連の API をレイヤーに追加しますjava。変更が必要なファイルは主に次のとおりですtypeface.java和textview.java
  4. SDKをコンパイルする
  5. 新しく生成した SDK をプロジェクトにインポートし、自分で追加したフォントを 2 つの方法で設定setTypeface(Typeface.KAISHU)できます。android:typeface=(“kaishu”)

おすすめ

転載: blog.csdn.net/qq_20451879/article/details/131330043