/ / Hoe CSS-lettertypen te verbinden: instructie

Hoe CSS-lettertypen te verbinden: instructie

Bent u een ontwerper of webmaster, dan lieverweet gewoon hoe u CSS-lettertypen moet opnemen. Als je de eigenaar bent van een kleine blog en hebt besloten je bron te versieren en uniek te maken, dan zou deze kennis je moeten helpen. Maar dan is het beter om vanaf het begin te beginnen, om te begrijpen wat trapsgewijze stylesheets zijn, waar u lettertypen kunt krijgen en waar u ze kunt installeren.

beschrijving

Dus het antwoord op hoe een CSS-lettertype te verbindenEen site moet beginnen met een beschrijving van de formele taal zelf. CSS is een cascading style sheet. Deze taal wordt gebruikt als beschrijving van het uiterlijk van het document. Het werkt samen met de opmaaktaal.

verbind css-lettertypen

CSS werkt eraan om de visuele kenmerken van pagina's op internet aan te geven. Deze laatste moet gebaseerd zijn op speciale HTML- of XHTML-opmaaktalen.

het gebruik van

Wie heeft CSS nodig?Verbind lettertypen, stel kleuren in, rangschik blokken, etc. is noodzakelijk voor webmasters, programmeurs die werken aan het maken van een site. De belangrijkste taak van trapsgewijze stylesheets is om de structurering visueel te scheiden. Dat wil zeggen, als HTML een solide tekstblok vormt, dan helpt CSS om dit blok voorwaardelijk te "decoreren", elementen te markeren, parameters toe te wijzen.

Scheiding biedt documenttoegankelijkheid, meer flexibiliteit en controle. Hiermee kunt u complexe en herhaalbare inhoudselementen verwijderen.

verbinding

Voordat u begrijpt hoe u verbinding moet makenlettertypen in CSS, moet u begrijpen hoe trapsgewijze stylesheets met het bestand worden gesynchroniseerd. Hun regels zijn geïmplementeerd in de taal met dezelfde naam. Het stylesheet zelf heeft CSS-regels verworven, die het gebruikt. Tabellen kunnen in een visueel bewerkt document staan, of in een apart bestand met de extensie .css. Zo'n bestand bevat meestal alleen opdrachten en aantekeningen.

hoe een lettertype te verbinden met een css-site

Zo wordt duidelijk dat style sheets op verschillende manieren aan elkaar kunnen worden gekoppeld. Laten we ze verder beschouwen.

methoden

Er zijn vier opties om te helpen.CSS-lettertypen opnemen, een tint toewijzen, blokken definiëren, enz. Zoals eerder vermeld, kan een set regels in een in HTML geschreven bestand staan. Maar deze optie is niet geliefd bij veel ontwerpers. Dit wordt veroorzaakt door het feit dat het dan in het hele canvas van de teams moeilijk is om beschrijvende parameters te vinden en alles te beheren. Het is veel gemakkelijker om stijlen in een apart document toe te wijzen.

Als de CSS zich afzonderlijk bevindt, worden ze verbonden via de -tag. Het moet binnen en worden geplaatst. In deze notitie moet u het href-kenmerk specificeren, dat het adres van het bestand met CSS zal tonen.

Als de opdrachten opnieuw worden samengesteld als een afzonderlijk bestand,We koppelen ze aan het webdocument via de @import-richtlijn. Het moet tussen de tekens staan. Direct na markeringen liggen. En de vierde manier is om de regels in het hart van een van de tags te plaatsen, via het kenmerk style. De regels zijn dan van invloed op een afzonderlijke parameter, die binnen de grenzen van een bepaalde tekst valt.

css connect otf font

De eerste twee methoden markeerden het uiterlijk van externe stylesheets en de tweede - intern.

Lettertypen

Waar worden lettertypen voor gebruikt?Natuurlijk wil elke site-eigenaar dat zijn bron er niet alleen mooi, maar ook uniek uitziet. Ik zou graag speciale elementen op de pagina's willen plaatsen die onder iedereen zouden kunnen opvallen. Ook zie je vaak koppen of een menu met niet-standaard schrift.

Hierover zijn veel vragen.Misschien hebben de webmasters de in Photoshop getekende afbeelding gebruikt. Misschien is deze optie dankzij Flash verschenen. Er is een optie die Javascript heeft gebruikt. Maar zoals de praktijk laat zien, is de eerste optie lastig en traag, de tweede is verouderd en de derde is te verward. Om iets nieuws en moois te maken, kunt u proberen CSS-lettertypen met elkaar te verbinden.

eigenschappen

Het moet duidelijk zijn dat in ons geval lettertypen dat zijnniet alleen een bepaalde stijl, maar ook een aantal eigenschappen die nodig zijn om het uiterlijk van de tekst te bepalen. Je kunt verschillende opties gebruiken. Wijs een specifiek lettertype toe aan de kop, alinea, citaat, hoofdtekst, menu, enz.

css connect ttf font

Ondanks het feit dat een enormeen verscheidenheid aan stijlen, maten, verzadigingen, enz., is het belangrijk om de leesbaarheid niet te vergeten. Het is beter om een ​​grote stapel verschillende stijlen te vermijden. Twee lettertypen op de pagina zijn voldoende.

Gezinnen

Om de stijl te kunnen kiezenfont gebruik de font-family. Het is erg moeilijk om ondubbelzinnig te begrijpen of er een bepaald lettertype op de pc van de lezer van uw bron staat, het is beter om alle opties van hetzelfde type in te voeren. In dit geval kiest de webbrowser degene die op het systeem van de gebruiker wordt gevonden.

Deze familie heeft een aantal betekenissen. Familienaam wordt bijvoorbeeld weergegeven door de naam van een lettertypefamilie. De waarde voor de algemene familie identificeert de vijf belangrijkste lettertypefamilies.

De lettertypefamilie is verantwoordelijk voor de stijlselectie. Deze stijl is geërfd evenals de vorige. De betekenissen zijn onder meer normaal of cursief en cursief. De lettertypevariantstijl is verantwoordelijk voor small caps. Gebruik voor verzadiging lettertype-gewicht enz. Aan het lettertype kan een grootte en kleur worden toegewezen.

Niet-standaard oplossing

Naast standaardlettertypen kunt uniet-standaard oplossingen. Ze zijn meestal unieker en u zult ze hoogstwaarschijnlijk niet opmerken op sites van concurrenten. U hoeft hiervoor geen afbeeldingen, javascript en flash te gebruiken. Het is voldoende om de regel @ font-face te nemen. Hiermee kan de gebruiker een extern bestand in een document laden.

Deze methode maakt het mogelijk om een ​​CSS-lettertype aan te sluitenOTF en TTF. Dit zijn speciale formaten die dit behoorlijk goed doen. Er kunnen alleen problemen optreden met Internet Explorer. Hoewel hij in 1997 voor het eerst lettertypen van derden begon te gebruiken, stelt hij nu strenge eisen.

Hij doet veel om uw werk te bederven. Het kan een bestand vaak comprimeren met een lettertype, soms kan het het versleutelen. Daarom komen er allerlei hacks voor.

formats

Er zijn nu verschillende lettertype-indelingen diemoet weten. Anders krijgt u te maken met een aantal inconsistenties en onverenigbaarheden. U kunt het CSS TTF-lettertype verbinden. Dit formaat wordt nu ondersteund door alle webbrowsers. Een uitzondering kan zijn Internet Explorer versie 8 en lager, evenals Opera Mini 5.0-8.0.

hoe css-lettertype uit map te verbinden

Alleen IE kan met EOT werken. De situatie bij WOFF is hetzelfde als bij TTF. Maar SVG werkt in Chrome-browsers tot versie 37, evenals in Safari, iOS Safari, Android Browser. Zoals de praktijk laat zien, is het het beste om TTF te gebruiken. Dit is de meest veelzijdige optie en veroorzaakt zelden problemen. Het komt het meest voor.

De regel

Dus om het lettertype van een van devan de bovenstaande formaten, gebruik gewoon de @ font-face-regel waar we het eerder over hadden. Om het duidelijk te maken, moet u een specifiek algoritme volgen. U hebt een lettertypebestand met de naam font.ttf. Om het voor de hoofdtekst te gebruiken, moet u eerst het bestand zelf kopiëren naar de map waarin alle sitebestanden zich bevinden.

Als u meer dan één lettertype wilt gebruiken, kunt u hier een speciale map aanmaken waar u ze kunt uploaden. Dit maakt het veel gemakkelijker voor u om ze te vinden en de inhoud van een dergelijke map te wijzigen.

Nu moeten we ervoor zorgen dat de browser ons lettertype zelf laadt. Om dit te doen, moet u hem instructies geven. We gebruiken de richtlijn @ font-face. Ons commando zal er als volgt uitzien:

@ font-face {

font-family: MyUniqueFont;

src: url ("fonts / font.ttf");

}

Het font-family commando is ervoor verantwoordelijk dat het fontkreeg zijn naam en daarna kon het worden gebruikt bij het schrijven van de stijl. De tweede regel bevat een indicatie van het pad waar de browser de stijl moet zoeken en verbinden. Dit is geen universeel adres. Dit pad is afhankelijk van waar u het lettertypebestand hebt geplaatst. Dit laat u zien hoe u een CSS-lettertype uit een map kunt opnemen.

hoe u meerdere css-lettertypen verbindt

Verbindingen

Als u niet weet hoe u meerdereCSS-lettertypen, hier staat ook een instructie over. Hiermee kunt u meerdere bestanden tegelijk specificeren. U kunt er bijvoorbeeld een tiental verbinden. Om dit te doen, moet u de reeds bovenstaande @ font-face-regel gebruiken. Als u het voorbeeld volgt van hoe u eerder een bestand uit de map hebt verbonden, geeft u op dezelfde manier vanaf een nieuwe regel koppelingen aan naar andere lettertype-opties.

Als je een WordPress-site hebt,het verbinden van stijlen is nog eenvoudiger. Als u de kopstijl moet wijzigen, hoeft u alleen maar in te loggen op het admin-paneel. Zoek daar naar "Thema-instellingen". De sectie Typografie heeft een hele lijst met verschillende opties. U hoeft alleen de wijziging te selecteren en op te slaan.

Andere opties

Heel vaak gebruiken zeGoogle Fonts-service. Het is een populaire tool voor het selecteren en verbinden van stijlen. Er zijn hier talloze lettertypesets. Ga naar de officiële website om ze te verbinden.

Je ziet een hele lijst met voorbeelden ende mogelijkheid om te experimenteren. Nadat u de gewenste stijl heeft toegevoegd, vergeet dan niet om het Cyrillische alfabet te selecteren als uw bron in het Russisch is. Dan kun je de maat, stijl kiezen, of direct kiezen uit meerdere opties voor alle gelegenheden.

hoe lettertypen correct te verbinden in css

Daarna heb je de code die je nodig hebt klaaringesteld op CSS-bestand. In dit geval is de regel van het toevoegen van methoden ook van toepassing. Als style sheets bijvoorbeeld in een apart document worden gepresenteerd, wordt de opdracht naar de eerste regel gestuurd. Als je stijlpagina's rechtstreeks in het HTML-bestand hebt, moet je deze toevoegen aan de body van de <style> en </style> -tags.

bevindingen

Nieuwe lettertypen aan uw website toevoegen is eenvoudig. Het is belangrijk om onmiddellijk te beslissen over de methoden en opties. Afhankelijk van het systeem waarop uw site zich bevindt, moet u over deze acties nadenken. Als u een zelfgeschreven bron heeft, zijn er in dit geval enkele opties. Als u bijvoorbeeld op WordPress bent, is deze bewerking veel eenvoudiger dan het lijkt.

leuk vond:
0
Populaire berichten
Spirituele ontwikkeling
eten
Y