Hoe voeg je een niet-standaard lettertype toe aan een website?

Is er een manier om een aangepast lettertype aan een website toe te voegen zonder afbeeldingen, Flashof wat andere afbeeldingen?

Ik werkte bijvoorbeeld aan een trouwwebsite, en ik vond een heleboel leuke lettertypen voor dat onderwerp. Maar ik kan de juiste manier niet vinden om dat lettertype op de server toe te voegen. En hoe voeg ik dat lettertype met CSS toe aan de HTML? Is dit mogelijk zonder afbeeldingen?


Antwoord 1, autoriteit 100%

Dit kan via CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(https://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

Het wordt ondersteund voor alle reguliere browsersals je TrueType- Fonts (TTF), de Web Open Font Format (WOFF) of Embedded Opentype (EOT).


Antwoord 2, autoriteit 24%

Je kunt enkele lettertypen toevoegen via Google Web Fonts.

Technisch gezien worden de lettertypen gehost bij Google en koppelt u ze in de HTML-header. Vervolgens kunt u ze vrij gebruiken in CSS met @font-face(lees erover).

Bijvoorbeeld:

In het gedeelte <head>:

<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Vervolgens in CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

De oplossing lijkt redelijk betrouwbaar (zelfs Smashing Magazine gebruikt het voor de titel van een artikel.). Er zijn tot nu toe echter niet zo veel lettertypen beschikbaar in Google Font Directory.


Antwoord 3, autoriteit 15%

De manier om te gaan is het gebruik van de @font-face CSS-declaratie waarmee auteurs online lettertypen kunnen specificeren om tekst op hun webpagina’s weer te geven. Door auteurs toe te staan hun eigen lettertypen aan te leveren, elimineert @font-face de noodzaak om afhankelijk te zijn van het beperkte aantal lettertypen dat gebruikers op hun computers hebben geïnstalleerd.

Bekijk de volgende tabel:

voer hier afbeeldingsbeschrijving in

Zoals je kunt zien, zijn er verschillende formaten die je moet kennen, voornamelijk vanwege de compatibiliteit tussen verschillende browsers. Het scenario op mobiele apparaten is niet veel anders.

Oplossingen:

1 – Volledige browsercompatibiliteit

Dit is de methode met de diepst mogelijke ondersteuning op dit moment:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 – Het grootste deel van de browser

Dingen zijn echter verschuivend in de richting van WOFF, dus je kunt waarschijnlijk wegkomen met:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 – Alleen de nieuwste browsers

Of zelfs gewoon WOFF.
Je gebruikt het dan als volgt:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Referenties en verder lezen:

Dat is vooral wat u moet weten over het implementeren van deze functie. Als u meer over dit onderwerp wilt onderzoeken, raad ik u aan de volgende bronnen te bekijken. Het meeste van wat ik hier plaats, is afgeleid van het volgende


Antwoord 4, autoriteit 3%

Als je met een niet-standaard lettertype een aangepast lettertype met een standaardindeling bedoelt, dan doe ik dat als volgt, en het werkt voor alle browsers die ik tot nu toe heb gecontroleerd:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

je hebt dus zowel het ttf- als het eot-lettertype nodig. Sommige online beschikbare tools kunnen de conversie uitvoeren.

Maar als je een lettertype wilt toevoegen in een niet-standaard formaat (bitmaps, enz.), kan ik je niet helpen.


Antwoord 5, autoriteit 2%

Ik heb ontdekt dat de gemakkelijkste manier om niet-standaard lettertypen op een website te hebben, is door sIFR

Het gaat om het gebruik van een Flash-object dat het lettertype bevat, maar het degradeert mooi naar standaardtekst/lettertype als Flash niet is geïnstalleerd.

De stijl wordt ingesteld in uw CSS en JavaScript stelt de Flash-vervanging in voor uw tekst.

Bewerken: (ik raad nog steeds aan afbeeldingen te gebruiken voor niet-standaard lettertypen omdat sIFR tijd aan een project toevoegt en onderhoud kan vergen).


Antwoord 6, autoriteit 2%

Het artikel Font-face in IE: Web Fonts laten werkenzegt dat het werkt met alle drie de belangrijkste browsers.

Hier is een voorbeeld dat ik heb laten werken: http://brendanjerwin.com/test_font.html

Meer discussie vindt u in Lettertypen insluiten.


Antwoord 7, autoriteit 2%

Typeface.jsen Cufonzijn twee andere interessante opties. Het zijn JavaScript-componenten die speciale lettertypegegevens in JSON-indeling weergeven (die u kunt converteren van TrueTypeof OpenType-indelingen op hun websites) via het nieuwe <canvas> element in alle nieuwere browsers behalve Internet Explorer en via VMLin Internet Explorer.

Het grootste probleem met beide (vanaf nu) is dat het selecteren van tekst niet werkt of in ieder geval heel onhandig werkt.

Toch is het erg leuk voor koppen. Hoofdtekst… Ik weet het niet.

En het is verrassend snel.


Antwoord 8, autoriteit 2%

Of je kunt sIFRproberen. Ik weet dat het Flash gebruikt, maar alleen als het beschikbaar is. Als Flash niet beschikbaar is, wordt de originele tekst weergegeven in het originele (CSS)-lettertype.


Antwoord 9

De techniek die het W3C heeft aanbevolen om dit te doen, wordt “embedding” genoemd en wordt goed beschreven in de drie artikelen hier: Lettertypen insluiten. In mijn beperkte experimenten heb ik vastgesteld dat dit proces foutgevoelig is en heb ik beperkt succes gehad om het te laten functioneren in een omgeving met meerdere browsers.


Antwoord 10

Safari en Internet Explorer ondersteunen beide de CSS @font-face-regel, maar ze ondersteunen twee verschillende ingesloten lettertypen. Firefox is van plan om binnenkort hetzelfde type als Apple te gaan ondersteunen. SVG kan lettertypen insluiten, maar wordt nog niet zo breed ondersteund (zonder plug-in).

Ik denk dat de meest draagbare oplossing die ik heb gezien, is om een JavaScript-functie te gebruiken om koppen enz. te vervangen door een afbeelding die is gegenereerd en in de cache op de server wordt opgeslagen met het door jou gekozen lettertype — op die manier werk je gewoon de tekst bij en doe je het niet’ je hoeft niet te rommelen in Photoshop.


Antwoord 11

Als u ASP.NET gebruikt, is het heel eenvoudig om op afbeeldingen gebaseerde lettertypen te genereren zonder dat u lettertypen op de server hoeft te installeren (zoals bij het toevoegen aan de geïnstalleerde lettertypebasis) door gebruik te maken van:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

en dan met dat lettertype tekenen op een Graphics.


Antwoord 12

Het lijkt erop dat het alleen werkt in Internet Explorer, maar een snelle Google-zoekopdracht naar “html embed fonts” levert http://www.spoono.com/html/tutorials/tutorial.php?id=19

Als je platformonafhankelijk wilt blijven (en dat zou je ook moeten doen!) moet je afbeeldingen gebruiken, of gewoon een standaardlettertype gebruiken.


Antwoord 13

Ik heb wat onderzoek gedaan en vond Dynamische tekstvervanging(gepubliceerd op 15-06-2004).

Deze techniek maakt gebruik van afbeeldingen, maar het lijkt ‘handsfree’ te zijn. U schrijft uw tekst en laat een paar geautomatiseerde scripts automatisch zoeken en vervangen op de pagina voor u.

Het heeft enkele beperkingen, maar het is waarschijnlijk een van de gemakkelijkere keuzes (en meer compatibel met de browser) dan alle andere die ik heb gezien.


Antwoord 14

Het is ook mogelijk om WOFF-lettertypen te gebruiken – voorbeeld hier

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }

Antwoord 15

Geef gewoon de link naar het daadwerkelijke lettertype zoals dit en u bent klaar om te gaan

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>
<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>

Antwoord 16

Typeface.js JavaScript-manier:

Met typeface.js kun je custom embedden
lettertypen in uw webpagina’s, zodat u dat niet doet
tekst naar afbeeldingen moeten renderen

In plaats van afbeeldingen te maken of te gebruiken
flash alleen om de afbeelding van uw site weer te geven
tekst in het gewenste lettertype, u kunt gebruiken
typeface.js en schrijf in gewone HTML
en CSS, net alsof uw bezoekers
het lettertype lokaal geïnstalleerd.

http://typeface.neocracy.org/


Antwoord 17

Zie het artikel 50 Nuttig Ontwerptools voor prachtige webtypografievoor alternatieve methoden.

Ik heb alleen Cufongebruikt. Ik vond het betrouwbaar en zeer gebruiksvriendelijk, dus ik ben ermee doorgegaan.


Antwoord 18

Als je een bestand van je lettertype hebt, moet je meer formaten van dat lettertype toevoegen voor andere browsers.

Voor dit doel gebruik ik een lettertype-generator zoals Fontsquirrelhet biedt alle lettertype-indelingen &amp ; zijn @font-face CSS, je hoeft alleen maar & zet het in je CSS-bestand.


Antwoord 19

@font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}

Other episodes