web-dev-qa-db-ja.com

Material UIのwebpackビルドにRobotoフォントを含める方法

Material UI （React）に基づき、Webpackで構築されたprogressiveWebアプリの場合、Robotoを適切に含める方法アプリがGoogleサーバーに依存しないようにフォントを設定し、フォントも機能するoffline？

  • installation page は Googleフォントページ を参照しているだけですが、明らかにフォントはGoogleサーバーからダウンロードされます。

  • Robotoフォントに関して同様の Material UI Issue が存在しますが、それでもフォントファイルを提供するGoogleに依存しています。

  • Robotoフォントファイルを提供する NPMパッケージを見つけました 、しかし、多くのスタイルとフォント形式が提供されているため、それらのファイルを含める方法がわかりません。わからないスタイルマテリアルUIは本当に必要です。また、これらのフォントファミリを@import経由で単にインポートすると、 performance issues が発生するようです。

だから、rightRobotoファイルをアプリケーションにバンドルするための良い簡単なソリューションは何ですか？

webpackwebfontsmaterial-uiroboto
36
Udo G

これが、私のチームがWebpackプロジェクトにRobotoフォントを含めて行った方法です。

Robotoフォントをダウンロードし、フォント固有のフォルダーにCSSファイルを作成します

  • フォルダー（/fonts）を作成します。
  • Font Squirrel からすべてのRobotoフォントをダウンロードし、/fontsに移動します。
  • CSSファイル（/fonts/index.css）を作成します。このファイルの内容は、 このチュートリアル から取得しました。

index.css：

* {
  font-family: Roboto, sans-serif;  
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Regular-webfont.woff') format('woff'),
         url('Roboto-Regular-webfont.ttf') format('truetype'),
         url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Italic-webfont.eot');
    src: url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Italic-webfont.woff') format('woff'),
         url('Roboto-Italic-webfont.ttf') format('truetype'),
         url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Bold-webfont.eot');
    src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Bold-webfont.woff') format('woff'),
         url('Roboto-Bold-webfont.ttf') format('truetype'),
         url('Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-BoldItalic-webfont.eot');
    src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-BoldItalic-webfont.woff') format('woff'),
         url('Roboto-BoldItalic-webfont.ttf') format('truetype'),
         url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Thin-webfont.eot');
    src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Thin-webfont.woff') format('woff'),
         url('Roboto-Thin-webfont.ttf') format('truetype'),
         url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Light-webfont.eot');
    src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Light-webfont.woff') format('woff'),
         url('Roboto-Light-webfont.ttf') format('truetype'),
         url('Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-LightItalic-webfont.eot');
    src: url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-LightItalic-webfont.woff') format('woff'),
         url('Roboto-LightItalic-webfont.ttf') format('truetype'),
         url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Medium-webfont.eot');
    src: url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Medium-webfont.woff') format('woff'),
         url('Roboto-Medium-webfont.ttf') format('truetype'),
         url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-MediumItalic-webfont.eot');
    src: url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-MediumItalic-webfont.woff') format('woff'),
         url('Roboto-MediumItalic-webfont.ttf') format('truetype'),
         url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');
    font-weight: 300;
    font-style: italic;
}

ファイルローダーwebpackモジュールを使用してフォントファイルをロードし、webpackがそれらを認識できるようにします

webpack.conf.js：

loaders: [
  ..., {
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    loader: 'file?name=fonts/[name].[ext]'
  }
]

アプリのメインエントリにフォントcssファイルをインポートします

App.js：

import './fonts/index.css';

以上です。これで、アプリケーションのデフォルトのフォントはRobotoになります。

編集：Material-UIが実際に使用するRobotoフォントはどれですか？

この質問の一部は、Robotoフォント全体がほぼ5MBであるため、プロジェクトに含めるrightRobotoフォントを決定することです。

[〜＃〜] readme [〜＃〜] で、Robotoを含めるための指示は次を指します： fonts.google.com/?selection.family=Roboto:300,400,5 。ここでは、300 = Roboto-Light、400 = Roboto-Regular、および500 = Roboto-Mediumです。これらは typography.jsファイル で定義されているフォントの太さに対応しています。これらの3つのフォントウェイトは、ライブラリのほぼ全体で使用量を占めますが、 DateDisplay.js にRegular-Boldへの参照が1つあります。 DatePickerを使用していない場合は、おそらくそれを省略しても安全です。イタリックフォントスタイルは、GitHubマークダウンスタイル以外のプロジェクトでは使用されません。

この情報はこの記事の執筆時点では正確ですが、将来変更される可能性があります。

38
Daniel Bank

この問題で文書化されているようにそれをすることもできます： https://github.com/callemall/material-ui/issues/6256

npm install typeface-roboto --save

次に、index.jsで：

import 'typeface-roboto'

Webpack/create-react-appで動作します。

32
kimomat

アプリケーションがcreate-react-appで起動された場合、[可視] webpack configfileがありません。この場合、次のことができます。

  1. / publicに/ fontsディレクトリを作成します

  2. _@font-faces_を定義する/public/fonts/fonts.cssを作成します

    @font-face { font-family: 'inglobal'; font-weight: normal; font-style: normal; src: url('./OperatorMono.ttf'); }

  3. フォントファイルをコピーする

  4. _<link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css">_を/public/index.htmlに追加します

  5. ほら！

5/b。それでも何らかの理由で機能しない場合は、フォントの拡張子を.cssに変更します（src：url（ './ OperatorMono.css'）でも）

0
sandorvasas