capsize
@capsizecss
Wenn Sie kentern, wird die Größe und das Layout von Text so vorhersehbar wie jedes andere Element auf dem Bildschirm.
Unter Verwendung von Schriftmetadaten kann der Text nun gemäß der Höhe seiner Großbuchstaben angelegt werden, während der Raum über Großbuchstaben und unterhalb der Grundlinie abschneidet.
npm install @capsizecss/corefont-facecreateStyleObjectGibt ein CSS-in-JS-Style-Objekt zurück.
createStyleObject über die relevanten Optionen. import { createStyleObject } from '@capsizecss/core' ;
const capsizeStyles = createStyleObject ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : {
capHeight : 700 ,
ascent : 1058 ,
descent : - 291 ,
lineGap : 0 ,
unitsPerEm : 1000 ,
} ,
} ) ;Hinweis: Es wird empfohlen, das @capsizecss/Metrics -Paket zu installieren und die Metriken von dort aus zu importieren:
import { createStyleObject } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizeStyles = createStyleObject ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;Weitere Möglichkeiten finden Sie in der Option FontMetrics, die unten dokumentiert ist, um diese Metriken zu erhalten.
css -Prop. < div
css = { {
// fontFamily: '...' etc,
... capsizeStyles ,
} }
>
My capsized text ?
< / div>
Euen HINWEIS: Es wird nicht empfohlen, weitere Layout-Stile auf dasselbe Element anzuwenden, da dies die für die Verkleidung verwendete Stile gefährdet. Überlegen Sie stattdessen ein verschachteltes Element.
createStyleString Gibt eine CSS -Zeichenfolge zurück, die in ein style -Tag oder an ein Stylesheet angehängt werden kann.
createStyleString über die relevanten Optionen. import { createStyleString } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizedStyleRule = createStyleString ( 'capsizedText' , {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;style hinzu und wenden Sie den angegebenen Klassennamen an. document . write ( `
<style type="text/css">
${ capsizedStyleRule }
</style>
<div class="capsizedText">
My capsized text ?
</div>
` ) ;
Euen HINWEIS: Es wird nicht empfohlen, weitere Layout-Stile auf dasselbe Element anzuwenden, da dies die für die Verkleidung verwendete Stile gefährdet. Überlegen Sie stattdessen ein verschachteltes Element.
CAPSIZE unterstützt zwei Methoden zur Definition der Größe von Text, capHeight und fontSize .
HINWEIS: Sie sollten immer nur den einen oder anderen übergeben, nicht beides.
capHeight: <number>Legt die Höhe der Großbuchstaben auf den definierten Wert fest. Das Definieren der Typografie auf diese Weise macht das Ausrichten an einem Netz oder mit anderen Elementen, z. B. Ikonen, einer Brise.
fontSize: <number> Durch das Festlegen der Schriftgröße können Sie alle Vorteile des White Space-Trimmens nutzen und gleichzeitig eine explizite font-size für Ihren Text angeben. Dies kann bei Bedarf nützlich sein, um eine konkrete Konstruktionsspezifikation zu entsprechen oder in ein vorhandenes Produkt anzupassen.
Capsize unterstützt zwei mentale Modelle für die Angabe von Linienhöhe, lineGap und leading . Wenn Sie keiner der Text übergeben, folgt der Standardabstand der angegebenen Schriftart z. B. line-height: normal .
HINWEIS: Sie sollten immer nur den einen oder anderen übergeben, nicht beides.
lineGap: <number>Legt die Anzahl der Pixel zwischen den Linien fest, gemessen zwischen der Basislinie und der Kappenhöhe der nächsten Linie.
leading: <number>Legt die Linienhöhe auf den bereitgestellten Wert fest, gemessen aus der Grundlinie des Textes. Dadurch wird das Web mit der Behandlung von Typografie in Design -Tools übereinstimmt.
Diese Metadaten wird aus den Metriktischen innerhalb der Schrift selbst extrahiert. Es gibt eine Reihe von Möglichkeiten, diese Informationen zu finden:
Wenn Sie eine Google -Schriftart oder eine Systemschrift verwenden, installieren Sie das @capSizecss/Metrics -Paket und importieren Sie die Metriken mit Namen. Zum Beispiel:
import arialMetrics from '@capsizecss/metrics/arial' ;Wenn Sie eine Schriftart aus einer Datei verwenden, installieren Sie das @capSizecss/Auspaket und extrahieren Sie die Metriken direkt aus der Schriftart Datei. Zum Beispiel:
import { fromFile } from '@capsizecss/unpack' ;
const metrics = await fromFile ( filePath ) ; Oder verwenden Sie die CAPSIZE -Website, um diese zu finden, indem Sie eine Schriftart und die Registerkarte Metrics in Schritt 3 referenzieren.
Das Kernpaket bietet auch einige andere metrisch basierende Funktionen zur Verbesserung der Typografie im Web:
Erstellt metriken basierte @font-face -Erklärungen, um die Ausrichtung der Fallbacks der Schriftfamilie zu verbessern, was die kumulativen Layout-Verschiebungsmetrik für Websites, die von einer Webschrift abhängen, dramatisch verbessern können.
Betrachten Sie das folgende Beispiel, in dem die gewünschte Webschrift Hummer ist und zu Helvetica Neue und dann Arial , font-family: Lobster, 'Helvetica Neue', Arial .
createFontStack aus dem Kernpaket: 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 ,
] ) ; Der zurückgegebene Wert enthält die generierten Schriftartenklarationen sowie die berechnete fontFamily mit den entsprechend geordneten Schriftart -Aliase.
Die zurückgegebenen Werte können in ein Stylesheet oder einen style -Block eingebunden werden. Hier ist eine Beispiel -Lenkervorlage:
< style type =" text/css " >
.heading {
font-family: {{ fontFamily }}
}
{{ fontFaces }}
</ style >Dies erzeugt das folgende 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 % ;
} Wenn Sie mit einer CSS-in-JS-Bibliothek zusammenarbeiten, können die zurückgegebenen fontFaces als JavaScript-Style-Objekt bereitgestellt werden, indem styleObject als fontFaceFormat Option bereitgestellt wird.
Hier ist ein Beispiel mit Emotionen:
import { Global } from '@emotion/core' ;
const { fontFaces , fontFamily } = createFontStack (
[ lobster , helveticaNeue , arial ] ,
{
fontFaceFormat : 'styleObject' ,
} ,
) ;
export const App = ( ) => (
< >
< Global styles = { fontFaces } / >
< p css = { { fontFamily } } > ... < / p >
< / >
) ;Ebenfalls nützlich als Quelle für die weitere Manipulation, da sie eine Datenstruktur ist, die über oder erweitert werden kann.
font-face Zusätzliche Eigenschaften können den generierten @font-face -Deklarationen über die Option fontFaceProperties hinzugefügt werden:
const { fontFamily , fontFaces } = createFontStack (
[ lobster , helveticaNeue , arial ] ,
{
fontFaceProperties : {
fontDisplay : 'swap' ,
} ,
} ,
) ;Dies führt zu den folgenden Ergänzungen zu den Erklärungen:
@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;
}Notiz
Die Übergabe eines der CSS -Eigenschaften der metrischen Überschreibung wird ignoriert, wenn sie durch kenterner Kentrierung berechnet werden. Die size-adjust wird jedoch zur Unterstützung der Feinabstimmung für bestimmte Anwendungsfälle akzeptiert. Dies kann verwendet werden, um die Anpassung für bestimmte Text zu finanzieren oder die Einstellung zu deaktivieren, indem sie auf 100% eingestellt werden.
Für Sprachen, die verschiedene Unicode -Untergruppen verwenden, z. B. Thai, müssen die Fallbacks entsprechend skaliert werden, da die Skalierung auf der Charakterfrequenz in der schriftlichen Sprache basiert.
Ein Fallback -Schriftstapel kann für eine unterstützte Teilmenge generiert werden, indem subset als Option angegeben wird:
const { fontFamily , fontFaces } = createFontStack ( [ lobster , arial ] , {
subset : 'thai' ,
} ) ; Tipp
Benötigen Sie Unterstützung für eine andere Unicode -Untergruppe? Erstellen Sie entweder ein Problem oder befolgen Sie die im Skript generate-weightings beschriebenen Schritte und öffnen Sie eine PR.
Gibt alle Informationen zurück, die erforderlich sind, um führende Ausstattungsstile für eine bestimmte Schriftgröße zu erstellen Dies ist nützlich für Integrationen mit verschiedenen Styling -Lösungen.
Akzeptiert die gleichen Optionen wie CreatestyleObject und 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,
//}Gibt die gerenderte Kappenhöhe für eine bestimmte Schriftgröße angesichts der bereitgestellten Schriftmetriken zurück.
import { getCapHeight } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const actualCapHeight = getCapHeight ( {
fontSize : 24 ,
fontMetrics : arialMetrics ,
} ) ;
// => number Um das Abrufen von Schriftarten zu vereinfachen, bietet Capsize das @capsizecss/metrics -Paket, das alle erforderlichen Daten für System- und Google -Schriftarten enthält.
npm install @capsizecss/metricsSehen Sie sich das Paket zur Dokumentation an.
Wenn Sie eine benutzerdefinierte Schriftart oder eine nicht im @capsizecss/metrics -Paket enthalten sind, bietet Capsize das @capsizecss/unpack -Paket, um die erforderlichen Daten entweder über eine URL oder aus einer lokalen Datei zu extrahieren.
npm install @capsizecss/unpackSehen Sie sich das Paket zur Dokumentation an.
MIT.
