capsize
@capsizecss
Capsize делает размеры и макет текста таким же предсказуемым, как и любой другой элемент на экране.
Используя метаданные шрифта, текст теперь может быть измерен в соответствии с высотой его заглавных букв, когда обрезает пространство над заглавными буквами и под исходным уровнем.
npm install @capsizecss/corefont-facecreateStyleObjectВозвращает объект стиля 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 -опору. < div
css = { {
// fontFamily: '...' etc,
... capsizeStyles ,
} }
>
My capsized text ?
< / div>
️ Примечание. Не рекомендуется применять дальнейшие стили, связанные с макетом, к тому же элементу, так как это рискует мешать стилям, используемым для отделки. Вместо этого рассмотрите возможность использования вложенного элемента.
createStyleString Возвращает строку CSS, которая может быть вставлена в тег style или добавлена в таблицу стиля.
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 .
Примечание: вы должны пройти только один или другой, а не оба.
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/uncack и извлеките метрики из файла шрифта напрямую. Например:
import { fromFile } from '@capsizecss/unpack' ;
const metrics = await fromFile ( filePath ) ; Или используйте веб -сайт Capsize, чтобы найти их, выбрав вкладку шрифта и ссылки на Metrics на шаге 3.
Основной пакет также предоставляет несколько других функций, основанных на метрик для улучшения типографии в Интернете:
Создает декларации на основе метрик @font-face для улучшения выравнивания запасных шрифтов, что может значительно улучшить совокупную метрику сдвига макета для сайтов, которые зависят от веб-шрифта.
Рассмотрим следующий пример, где желаемый веб-шрифт-лобстер, возвращаясь к 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 . 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 возвращаемые fontFaces могут быть предоставлены в качестве объекта в стиле JavaScript, предоставляя styleObject в качестве опции fontFaceFormat .
Вот пример с использованием эмоций:
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 Дополнительные свойства могут быть добавлены в сгенерированные объявления @font-face с помощью опции fontFaceProperties :
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% .
Для языков, которые используют различные подмножества Unicode, например, запасные отступления должны быть соответствующим образом масштабируются, так как масштабирование основано на частоте символов на письменном языке.
Степень шрифтов запасного можно сгенерировать для поддерживаемого подмножества, указав subset в качестве опции:
const { fontFamily , fontFaces } = createFontStack ( [ lobster , arial ] , {
subset : 'thai' ,
} ) ; Кончик
Нужна поддержка другого подмножества Unicode? Либо создайте проблему, либо выполните шаги, изложенные в сценарии generate-weightings и откройте PR.
Возвращает всю информацию, необходимую для создания ведущих стилей отделки для определенного размера шрифта, учитывая предоставленные метрики шрифта. Это полезно для интеграции с различными решениями для стиля.
Принимает те же варианты, что и CreatestyleObject и Createstestring.
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 предоставляет пакет @capsizecss/metrics содержащий все необходимые данные как для системных, так и для шрифтов Google.
npm install @capsizecss/metricsСмотрите пакет для документации.
Если вы используете пользовательский шрифт или один, не включенный в пакет @capsizecss/metrics , Capsize предоставляет пакет @capsizecss/unpack для извлечения необходимых данных либо через URL, либо из локального файла.
npm install @capsizecss/unpackСмотрите пакет для документации.
Грань
