capsize
@capsizecss
Capsizeは、画面上の他のすべての要素と同じくらい予測可能なテキストのサイズとレイアウトを作成します。
フォントメタデータを使用して、大文字の上のスペースをトリミングしながら、ベースラインの下のスペースをトリミングしながら、テキストを大文字の高さに応じてサイズにすることができます。
npm install @capsizecss/corefont-faceプロパティcreateStyleObjectCSS-in-JSスタイルのオブジェクトを返します。
createStyleObjectに関連するオプションを渡します。 import { createStyleObject } from '@capsizecss/core' ;
const capsizeStyles = createStyleObject ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : {
capHeight : 700 ,
ascent : 1058 ,
descent : - 291 ,
lineGap : 0 ,
unitsPerEm : 1000 ,
} ,
} ) ;注： @capsizecss/metricsパッケージをインストールし、そこからメトリックをインポートすることをお勧めします。
import { createStyleObject } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizeStyles = createStyleObject ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;これらのメトリックを取得するためのより多くの方法については、以下に文書化されたFontmetricsオプションを参照してください。
cssプロップを介して、テキスト要素にスタイルを適用します。 < div
css = { {
// fontFamily: '...' etc,
... capsizeStyles ,
} }
>
My capsized text ?
< / div>
ショ和 注：トリムに使用されるスタイルを妨げるリスクがあるため、さらにレイアウト関連スタイルを同じ要素に適用することはお勧めしません。代わりに、ネストされた要素の使用を検討します。
createStyleString styleタグに挿入したり、スタイルシートに追加されたりすることができるCSS文字列を返します。
createStyleStringをインポートします。 import { createStyleString } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizedStyleRule = createStyleString ( 'capsizedText' , {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;style要素に追加し、指定されたクラス名を適用します。 document . write ( `
<style type="text/css">
${ capsizedStyleRule }
</style>
<div class="capsizedText">
My capsized text ?
</div>
` ) ;
ショ和 注：トリムに使用されるスタイルを妨げるリスクがあるため、さらにレイアウト関連スタイルを同じ要素に適用することはお勧めしません。代わりに、ネストされた要素の使用を検討します。
Capsizeは、テキストのサイズ、 capHeightとfontSize定義する2つの方法をサポートしています。
注：両方ではなく、どちらかを渡すだけです。
capHeight: <number>大文字の高さを定義された値に設定します。この方法でタイポグラフィを定義すると、グリッドまたは他の要素など、アイコンなどの要素と並べられます。
fontSize: <number>フォントサイズを設定すると、テキストの明示的なfont-sizeを指定しながら、ホワイトスペースのトリミングのすべての利点を取得できます。これは、コンクリートの設計仕様を一致させるために必要な場合、または既存の製品に適合する必要がある場合に役立ちます。
Capsizeは、ラインの高さ、 lineGap 、 leading指定するための2つのメンタルモデルをサポートしています。どちらも渡されない場合、テキストは指定されたフォントのデフォルトの間隔に従いません。たとえばline-height: normal 。
注：両方ではなく、どちらかを渡すだけです。
lineGap: <number>次のラインのベースラインとキャップの高さの間で測定されるように、線間のピクセル数を設定します。
leading: <number>テキストのベースラインから測定されたように、指定値にラインの高さを設定します。これにより、Webはタイポグラフィが設計ツールでどのように扱われるかに合わせます。
このメタデータは、フォント自体内のメトリックテーブルから抽出されます。この情報を見つける方法はいくつかあります。
Googleフォントまたはシステムフォントを使用している場合は、 @Capsizecss/Metricsパッケージをインストールし、名前でメトリックをインポートします。例えば：
import arialMetrics from '@capsizecss/metrics/arial' ;ファイルからフォントを使用している場合は、 @capsizecss/unpackパッケージをインストールし、フォントファイルからメトリックを直接抽出します。例えば：
import { fromFile } from '@capsizecss/unpack' ;
const metrics = await fromFile ( filePath ) ;または、Capsize Webサイトを使用して、フォントを選択し、ステップ3でMetricsタブを参照してこれらを見つけます。
コアパッケージは、ウェブ上のタイポグラフィを改善するための他のいくつかのメトリックベースの機能も提供します。
メトリックベースの@font-face宣言を作成して、Fontファミリフォールバックのアライメントを改善します。これにより、Webフォントに依存するサイトの累積レイアウトシフトメトリックが劇的に改善できます。
次の例を考えてみましょう。目的のWebフォントがロブスターであり、 Helvetica Neue 、そしてArial 、たとえばfont-family: Lobster, 'Helvetica Neue', Arialに戻ります。
createFontStackインポートします。 import { createFontStack } from '@capsizecss/core' ; import lobster from '@capsizecss/metrics/lobster' ;
import helveticaNeue from '@capsizecss/metrics/helveticaNeue' ;
import arial from '@capsizecss/metrics/arial' ;font-family CSSプロパティを介して同じ順序を使用して、メトリックを配列として通過するフォントスタックを作成します。 const { fontFamily , fontFaces } = createFontStack ( [
lobster ,
helveticaNeue ,
arial ,
] ) ;返された値には、生成されたフォントフェイス宣言と、適切に順序付けられたフォントエイリアスを備えた計算されたfontFamilyが含まれます。
返された値は、スタイルシートまたはstyleブロックにテンプレートできます。これがハンドルバーテンプレートの例です。
< style type =" text/css " >
.heading {
font-family: {{ fontFamily }}
}
{{ fontFaces }}
</ style >これにより、次のCSSが生成されます。
. heading {
font-family : Lobster , 'Lobster Fallback: Helvetica Neue' ,
'Lobster Fallback: Arial' , 'Helvetica Neue' , Arial;
}
@font-face {
font-family : 'Lobster Fallback: Helvetica Neue' ;
src : local ( 'Helvetica Neue' );
ascent-override : 115.1741 % ;
descent-override : 28.7935 % ;
size-adjust : 86.8251 % ;
}
@font-face {
font-family : 'Lobster Fallback: Arial' ;
src : local ( 'Arial' );
ascent-override : 113.5679 % ;
descent-override : 28.392 % ;
size-adjust : 88.053 % ;
}CSS-in-JSライブラリを使用すると、 fontFaceFormatオプションとしてstyleObject提供することにより、返されたfontFaces JavaScriptスタイルオブジェクトとして提供できます。
ここに感情を使用した例があります：
import { Global } from '@emotion/core' ;
const { fontFaces , fontFamily } = createFontStack (
[ lobster , helveticaNeue , arial ] ,
{
fontFaceFormat : 'styleObject' ,
} ,
) ;
export const App = ( ) => (
< >
< Global styles = { fontFaces } / >
< p css = { { fontFamily } } > ... < / p >
< / >
) ;また、さらなる操作のソースとしても役立ちます。これは、繰り返しまたは拡張できるデータ構造です。
font-faceプロパティを提供します追加のプロパティは、 fontFacePropertiesオプションを介して生成された@font-face宣言に追加できます。
const { fontFamily , fontFaces } = createFontStack (
[ lobster , helveticaNeue , arial ] ,
{
fontFaceProperties : {
fontDisplay : 'swap' ,
} ,
} ,
) ;これにより、次の宣言に追加されます。
@font-face {
font-family: 'Lobster Fallback: Helvetica Neue';
src: local('Helvetica Neue');
ascent-override: 115.1741%;
descent-override: 28.7935%;
size-adjust: 86.8251%;
+ font-display: swap;
}
@font-face {
font-family: 'Lobster Fallback: Arial';
src: local('Arial');
ascent-override: 113.5679%;
descent-override: 28.392%;
size-adjust: 88.053%;
+ font-display: swap;
}注記
メトリックオーバーライドCSSプロパティのいずれかを通過すると、Capsizeによって計算されると無視されます。ただし、特定のユースケースのオーバーライドの微調整をサポートするために、 size-adjustプロパティは受け入れられます。これを使用して、特定のテキストの調整をフィネスするか、 100%に設定して調整を無効にするために使用できます。
スケーリングは書面による文字頻度に基づいているため、異なるユニコードサブセットを使用する言語の場合、それに応じてフォールバックをスケーリングする必要があります。
subsetオプションとして指定することにより、サポートされているサブセット用のフォールバックフォントスタックを生成できます。
const { fontFamily , fontFaces } = createFontStack ( [ lobster , arial ] , {
subset : 'thai' ,
} ) ; ヒント
別のユニコードサブセットのサポートが必要ですか？問題を作成するか、 generate-weightingsスクリプトで概説されている手順に従って、PRを開きます。
提供されているフォントメトリックが与えられた特定のフォントサイズに対して、リーディングトリムスタイルを作成するために必要なすべての情報を返します。これは、さまざまなスタイリングソリューションとの統合に役立ちます。
CreatestyleObjectやcreateStylestringと同じオプションを受け入れます。
import { precomputeValues } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizeValues = precomputeValues ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;
// => {
// fontSize: string,
// lineHeight: string,
// capHeightTrim: string,
// baselineTrim: string,
//}提供されたフォントメトリックを与えられた特定のフォントサイズのレンダリングされたキャップの高さを返します。
import { getCapHeight } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const actualCapHeight = getCapHeight ( {
fontSize : 24 ,
fontMetrics : arialMetrics ,
} ) ;
// => number フォントメトリックの検索を簡単にするために、Capsizeは、システムとGoogleフォントの両方に必要なすべてのデータを含む@capsizecss/metricsパッケージを提供します。
npm install @capsizecss/metricsドキュメントについてはパッケージを参照してください。
カスタムフォントまたは@capsizecss/metricsパッケージに含まれていないカスタムフォントを使用している場合、Capsizeは@capsizecss/unpackパッケージを提供して、URLまたはローカルファイルから必要なデータを抽出します。
npm install @capsizecss/unpackドキュメントについてはパッケージを参照してください。
mit。
