Gebruik je aangepaste lettertypen met CSS?

Ik heb een aantal nieuwe websites gezien die aangepaste lettertypen op hun sites gebruiken (anders dan de reguliere Arial, Tahoma, enz.).

En ze ondersteunen een aardig aantal browsers.

Hoe doe je dat? Terwijl het ook voorkomt dat mensen gratis toegang hebben om het lettertype te downloaden, indien mogelijk.

Antwoord 1, autoriteit 100%

Over het algemeen kunt u een aangepast lettertype gebruiken met @font-facein uw CSS. Hier is een heel eenvoudig voorbeeld:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('https://domain.com/fonts/font.ttf'); /*URL to font*/
}

Vervolgens, triviaal, om het lettertype op een specifiek element te gebruiken:

.classname {
    font-family: 'YourFontName';
}

(.classnameis uw selector).

Houd er rekening mee dat bepaalde lettertype-indelingen niet in alle browsers werken; je kunt de generator van fontsquirrel.com‘s generator gebruiken om te voorkomen dat je te veel moeite hebt met converteren.

Je kunt een mooie set gratis weblettertypen vinden die worden aangeboden door Google Fonts(heeft ook auto- gegenereerde CSS @font-faceregels, zodat u uw eigen regels niet hoeft te schrijven).

terwijl ook wordt voorkomen dat mensen gratis toegang hebben om het lettertype te downloaden, indien mogelijk

Nee, het is niet mogelijk om uw tekst op te maken met een aangepast lettertype dat is ingesloten via CSS, terwijl mensen het niet kunnen downloaden. Je moet afbeeldingen, Flash of het HTML5 Canvasgebruiken, die allemaal niet erg praktisch zijn .

Ik hoop dat dat heeft geholpen!

Antwoord 2, autoriteit 9%

Om ervoor te zorgen dat uw lettertype compatibel is met meerdere browsers, moet u ervoor zorgen dat u deze syntaxis gebruikt:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Genomen van hier.

Antwoord 3, autoriteit 7%

Je moet het lettertypebestand downloaden en in je CSS laden.

Vb Ik gebruik het lettertype Yanone Kaffeesatzin mijn webtoepassing.

Ik laad en gebruik het via

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

in mijn stylesheet.

Antwoord 4, autoriteit 3%

Tegenwoordig zijn er vier formaten voor lettertypecontainers in gebruik op het web: EOT, TTF, WOFF,enWOFF2.

Helaas, ondanks het brede scala aan keuzes, is er geen enkel universeel formaat dat in alle oude en nieuwe browsers werkt:

• EOTis alleen IE,
• TTFheeft gedeeltelijke IE-ondersteuning,
• WOFFgeniet de breedste ondersteuning, maar is niet beschikbaar in sommige oudere browsers
• WOFF2.0-ondersteuning is een werk in uitvoering voor veel browsers.

Als u wilt dat uw webapp in alle browsers hetzelfde lettertype heeft, wilt u misschien alle vier het lettertype in CSS opnemen

@font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

Antwoord 5

Als u geen lettertypen vindt die u van Google.com/webfonts of Fontsquirrel.com wilt, kunt u altijd uw eigen weblettertype maken met een lettertype die u hebt gemaakt.

Hier is een leuke tutorial: Maak je eigen lettertype Face Web Font Kit

Hoewel ik ben niet zeker van het voorkomen dat iemand je lettertype downloadt.

Ik hoop dat dit helpt,

Antwoord 6

Er is ook een interessante tool genaamd cufon . Er is een demonstratie van het gebruik ervan in deze Blog
Het is heel eenvoudig en interessant. Ook staat het niet toe dat mensen CTRL + C / CTRL + V de gegenereerde inhoud zijn.

Antwoord 7

Ik werk op WIN 8, gebruik deze code. Het werkt voor IE en FF, Opera, etc.
Wat ik begreep, zijn: WOFF-lettertype is licht en voorkom op Google-lettertypen.

GO Hier Om uw TTF-lettertype om te zetten naar WOFF voor.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

Antwoord 8

Ten eerste kun je niet voorkomen dat mensen lettertypen downloaden, behalve als het van jou is en dat duurt meestal maanden.
En het heeft geen zin om te voorkomen dat mensen lettertypen gebruiken.
Veel lettertypen die u op websites ziet, zijn te vinden op gratis platforms zoals degene die ik hieronder vermeld.

Maar als je een lettertype in je website wilt implementeren, lees dan dit:
Er is een vrij eenvoudige en gratis manier om lettertypen in uw website te implementeren.
Ik zou Google-lettertypen aanbevelen omdat het gratis en gemakkelijk te gebruiken is.
Ik gebruik bijvoorbeeld het lettertype Bangers van Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers)
Dit is hoe het eruit zou zien:
HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}