bc sansダウンロード - bc sansソースコードのダウンロード

bc sans

フォントのダウンロード

1.0.0

ダウンロード

bc sans

BC 州政府デジタルサービスの標準フォントはbc sansです。 bc sansオープンソースのフォントファミリであり、Google によって開発された Noto Sans の修正バージョンです。 bc sansには、ブリティッシュコロンビア州の先住民言語をサポートするための修正が含まれています。 BC州政府は現在、政府の記録、システム、サービスに先住民族の言語を含めるように取り組んでいます。どのような措置が取られているか、またどのように情報を入手できるかについては、「政府の記録、システム、サービスに先住民族の言語を含める - ブリティッシュコロンビア州」をご覧ください。

含まれるフォントのウェイトとスタイルは次のとおりです。

bc sansレギュラー - 400
bc sans Italic - 400
bc sansボールド - 700
bc sans太字斜体 - 700
bc sansライト - 300
bc sansライトイタリック - 300

印刷用のタイポグラフィ標準は、BC Visual Identity Program ページにあります。

ファイルをダウンロードする

別のファイル形式のフォントが必要な場合は、ここにすべてのオプションがあります

すべてのフォントファイル (.eot、.ttf、.otf、.woff、.woff2) をダウンロードします。
ローカルコンピュータ用のファイルをダウンロードします (.otf、.ttf)

統合

npm i --save @bcgov/bc-sans

反応する

ルートレベルのコンポーネントimport '@bcgov/bc-sans/css/BC_Sans.css'に埋め込む

タイポグラフィ.js

Typography.js のインストール手順はこちらをご覧ください。

bc sans', 'Noto Sans', 'Verdana', 'Arial', 'sans-serif'], bodyFontFamily: [' bc sans ', 'Noto Sans', 'Verdana', 'Arial', 'sans-serif'], scaleRatio: 2.074, }); export default typography;">

 import Typography from 'typography' ;
import '@bcgov/bc-sans/css/BC_Sans.css' ;

const typography = new Typography ( {
  baseFontSize : '16px' ,
  baseLineHeight : 1.25 ,
  headerFontFamily : [ ' bc sans ' , 'Noto Sans' , 'Verdana' , 'Arial' , 'sans-serif' ] ,
  bodyFontFamily : [ ' bc sans ' , 'Noto Sans' , 'Verdana' , 'Arial' , 'sans-serif' ] ,
  scaleRatio : 2.074 ,
} ) ;

export default typography ;

このパッケージに似たような CSS ファイルが 2 つあるのはなぜですか?

新しいプロジェクトの場合、2 つの CSS ファイルcss/BC_Sans.cssのいずれかを含める必要があるだけです。次に、CSS font-familyルールでbc sans参照します。

元々、このパッケージにはcss/BCSans.cssだけが同梱されていました。このファイルは@font-face宣言でfont-family名としてBCSans (スペースなし) を使用します。既存のアプリケーションコードの多くはこの名前を参照しています。ただし、フォントファイル内のメタデータでは、フォントファミリ名にbc sans (スペースあり) が使用されます。その結果、Figma などの UI デザインツールは、フォントファイルからbc sans使用してコードを出力します。この生成されたコードは、手動介入なしではこのパッケージで直接動作しません。

css/BC_Sans.css 、CSS font-family名にbc sans使用します。これは、フォントファイルのファミリーメタデータフィールドと一致します。 Figma から生成されたフォントスタイルコードはcss/BC_Sans.cssで動作します。新しいプロジェクトでは、デザイナーから開発者への引き継ぎを最もスムーズに行うために、 css/BC_Sans.cssを使用する必要があります。既存のプロジェクトの場合、切り替える必要はありません。