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请参阅包装以获取文档。
麻省理工学院。
