Ik heb instructies van een grafisch ontwerper voor een lay-out die “track 100” specificeert voor sommige elementen. In CSS is letter-spacingde equivalente eigenschap voor “tracking”.
Gegeven een waarde voor tracking, hoe drukt u deze uit als een waarde voor CSS in pixels?
Antwoord 1, autoriteit 100%
Moet je pixels gebruiken? De conversies die ik heb gevonden, zijn dat een trackingwaarde van 1000 gelijk is aan 1 em in CSS, dus in jouw geval zou tracking 100 0,1 em moeten zijn.
BEWERKEN
Gebruik deze site PXtoEM.comom van EM naar pixels te gaan. Voor uw specifieke geval wordt 0.1 em geconverteerd naar 2px. Dit is echter gebaseerd op een 16pt-lettertype, dus u zult zich moeten aanpassen aan de specifieke lettergrootte die u gebruikt.
Antwoord 2, autoriteit 50%
TL;DR: deel de tracking door 1000 en gebruik em‘s
Een beetje achtergrondinformatie over letter-spacingwordt altijd toegepast op tekst, dus we moeten een relatieve lengte-eenheid gebruiken. Omdat font-sizekan veranderen door de gebruiker of zelfs door cascade.
De beste-eenheid van lengte voor tekst is de em-eenheid.
Deze eenheid vertegenwoordigt de berekende lettergrootte van het element. Als gebruikt
op de eigenschap font-size zelf, vertegenwoordigt het de geërfde
lettergrootte van het element.
CSS-lengtes – Mozilla Developer Network
Waarom is tracking anders?
Layout-apps zoals Adobe’s Photoshop, Illustrator en InDesign gebruiken em‘s in hun tracking, maar manipuleren de eenheid zodat het een gemakkelijker nummer is voor ontwerpers om mee te spelen. Om het gemakkelijker te maken, maalhet met 1000.
Tracking terug converteren naar hele em‘s
Hiervoor hoeven we alleen het trackingnummer te delen door 1000 om de eenheid terug te krijgen tot een geheel dat CSS kan gebruiken.
Dus 50/1000 = 0.05em.
Dit berekenen in CSS/SCSS
Als je SCSSgebruikt en een herbruikbare oplossing wilt, is hier een mixin.
// Convert illustrator, indesign and photoshop tracking into letter spacing.
@function tracking( $target ){
@return ($target / 1000) * 1em;
}
@mixin tracking( $target ){
letter-spacing: tracking( $target );
}
Om de bovenstaande functies te gebruiken, kunt u dit gewoon doen.
.example {
@include tracking(50);
}
Als alternatief kun je de wiskunde gewoon inline doen zonder een mixin, zodat het minder geabstraheerd is:
.example{
letter-spacing: #{(50/1000)}em;
}
De uitvoer voor de bovenstaande voorbeelden is:
.example {
letter-spacing: 0.05em;
}
Opmerking:
U moet geen op pixels gebaseerde waarde gebruiken, aangezien pixels vast zijn en breken wanneer:
-
De ontwerper wijzigt de lettergrootte. Je zou moeten herberekenen
de waarde. -
Als de gebruiker de tekstgrootte wijzigt, wordt het ontwerp van uw site niet weergegeven
zoals gewenst of zelfs onleesbaar.
Bovendien geven browsers tekst anders weer dan de grafische ontwerpprogramma’s, dus wees niet verbaasd als de ontwerper de tracking/letter-spatiëring aanpast bij het beoordelen van de implementatie.
Antwoord 3, autoriteit 25%
Conversie-CSS “letterspatiëring” bijhouden
1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em
Antwoord 4, autoriteit 3%
Voor het grootste deel zijn de bovenstaande antwoorden nauwkeurig genoeg, maar de 1000 die wordt gebruikt, gaat ervan uit dat uw lettertype een EM-afmeting heeft van 1000, en dat is niet altijd het geval. Ik heb lettertypen gezien die een EM-afmeting hebben van 1024 en sommige die zelfs 2048 waren, wat duidelijk een impact zal hebben.
U kunt de EM-formaat van een lettertype achterhalen door deze binnen te openen in iets als lettertype-smederij en selecteer vervolgens de elementen – & GT; Font Info Menu-item en het tabblad Algemeen.