capsize
@capsizecss
CapSize使文本的尺寸和佈局與屏幕上的所有其他元素一樣可預測。
使用字體元數據，現在可以根據其大寫字母的高度進行尺寸，同時修剪大寫字母上方和基線以下的空間。
npm install @capsizecss/corefont-face屬性createStyleObject返回CSS-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/量表軟件包，並從那裡導入指標：
import { createStyleObject } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizeStyles = createStyleObject ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;有關獲取這些指標的更多方法，請參見下面記錄的Fontmetrics選項。
css Prop。 < div
css = { {
// fontFamily: '...' etc,
... capsizeStyles ,
} }
>
My capsized text ?
< / div>
配x 注意：不建議將其他與佈局相關的樣式應用於同一元素，因為這可能會干擾用於修剪的樣式。而是考慮使用嵌套元素。
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>
` ) ;
配x 注意：不建議將其他與佈局相關的樣式應用於同一元素，因為這可能會干擾用於修剪的樣式。而是考慮使用嵌套元素。
CapSize支持兩種定義文本大小的方法， capHeight和fontSize 。
注意：您只能通過一個或另一個，而不是兩者。
capHeight: <number>將大寫字母的高度設置為定義的值。以這種方式定義字體使與網格或其他元素（例如圖標，輕而易舉）保持一致。
fontSize: <number>設置字體尺寸可以使您獲得白空間修剪的所有好處，同時仍為文本指定明確的font-size 。在需要時，這很有用，以匹配混凝土設計規格或擬合到現有產品中。
CapSize支持兩個用於指定線路高度， lineGap和leading心理模型。如果傳遞，文本都不會遵循指定字體的默認間距，例如line-height: normal 。
注意：您只能通過一個或另一個，而不是兩者。
lineGap: <number>按照線之間的測量，設置線之間的像素數量，在下一行的基線和蓋高度之間測量。
leading: <number>將線高設置為從文本基線測得的提供的值。這使網絡與設計工具中的版式處理方式保持一致。
該元數據是從字體本身內部的指標表中提取的。有多種找到此信息的方法：
如果使用Google字體或系統字體，請安裝 @capsizecss/量表軟件包，然後按名稱導入指標。例如：
import arialMetrics from '@capsizecss/metrics/arial' ;如果使用文件中的字體，請安裝 @capsizecss/Uncew package，然後直接從字體文件中提取指標。例如：
import { fromFile } from '@capsizecss/unpack' ;
const metrics = await fromFile ( filePath ) ;或者，使用CapSize網站通過在步驟3中選擇字體和引用Metrics卡來找到這些網站。
核心軟件包還提供了其他一些基於指標的功能，用於改善網絡上的排版：
創建基於指標的@font-face聲明，以改善字體家庭後備的一致性，這可以顯著改善依賴於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庫，則可以通過將styleObject作為fontFaceFormat選項提供作為JavaScript樣式對象提供返回的fontFaces 。
這是一個使用情感的示例：
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;
}筆記
通過CapSize計算，通過任何度量覆蓋的CSS屬性將被忽略。但是，接受size-adjust屬性是為了支持特定用例的替代。這可以用來修改特定文本的調整，或通過將其設置為100%來禁用調整。
對於使用不同Unicode子集的語言，例如泰語，需要相應地縮放後備，因為縮放是基於書面語言的字符頻率。
可以通過將subset集指定為選項來為受支持的子集生成後備字體堆棧：
const { fontFamily , fontFaces } = createFontStack ( [ lobster , arial ] , {
subset : 'thai' ,
} ) ; 提示
需要支持不同的Unicode子集嗎？創建問題，或者按照generate-weightings腳本中概述的步驟並打開PR。
返回給定字體指標，為特定字體尺寸創建領先的內飾樣式所需的所有信息。這對於與不同樣式解決方案的集成很有用。
接受與CreateSteyLobject和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 為了使FONT指標的檢索變得容易，CapSize提供了@capsizecss/metrics軟件包，其中包含系統和Google字體的所有必需數據。
npm install @capsizecss/metrics請參閱包裝以獲取文檔。
如果您使用的是自定義字體或未包含在@capsizecss/metrics軟件包中的未包含的字體，則Capsize提供@capsizecss/unpack軟件包，以通過URL或本地文件提取所需的數據。
npm install @capsizecss/unpack請參閱包裝以獲取文檔。
麻省理工學院。
