Ik gebruik geen Flash of PHP – en ik is gevraagd om een aangepast lettertype toe te voegen aan een eenvoudige HTML-lay-out. “Kg juni bug”
Ik heb het lokaal gedownload – is er een eenvoudige CSS-truc om dit te bereiken?
Antwoord 1, Autoriteit 100%
Ja, u kunt de CSS-functie gebruiken met de naam @ Font-Face.
Het is pas officieel goedgekeurd in CSS3, maar voorgesteld en geïmplementeerd in CSS2 en is al heel lang ondersteund.
U declareert het in de CSS zoals deze:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
Dan kunt u het gewoon verwijzen zoals de andere standaardlettertypen:
h3 { font-family: Delicious, sans-serif; }
Dus, in dit geval,
<html>
<head>
<style>
@font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }
h1 {
font-family: JuneBug
}
</style>
</head>
<body>
<h1>Hey, June</h1>
</body>
</html>
En u hoeft alleen de junebug.tff op dezelfde locatie te plaatsen als het HTML-bestand.
Ik heb het lettertype gedownload van de dafont.com website:
http://www.dafont.com/junebug.font
Antwoord 2, Autoriteit 6%
Voor de best mogelijke browserondersteuning moet uw CSS-code er als volgt uitzien:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
Zie voor meer informatie, zie het artikel met @ font-face op css-tricks.com .
Antwoord 3, Autoriteit 6%
U kunt @ Font-Face gebruiken in de meeste moderne browsers.
Hier is enkele artikelen over hoe het werkt:
- http://webdesignerwall.com/general/font-fac-solutions-suggesties
- http://webdesignerwall.com/tutorials/css3-font-face -Design-gids
Hier is een goede syntaxis voor het toevoegen van het lettertype aan uw app:
Hier zijn een paar plaatsen om lettertypen om te zetten voor gebruik met @ font-face:
- http://www.fontsquirrel.com/fontface/generator
- http://fontface.codeandmore.com/
- http://www.font2web.com/
Cufon werkt ook als je geen font-face wilt gebruiken, en het heeft goede documentatie op de website:
Antwoord 4, autoriteit 3%
Probeer dit
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
}<div class="FontMarket">KhonKaen Market</div>Antwoord 5, autoriteit 2%
Als u een externe stylesheet gebruikt, kan de code er ongeveer zo uitzien:
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
En moet worden opgeslagen in een apart .css-bestand (bijv. stijlen.css). Als uw .css-bestand zich op een andere locatie dan de paginacode bevindt, moet het eigenlijke lettertypebestand hetzelfde pad hebben als het .css-bestand, NIET het .html- of .php-webpaginabestand. Dan heeft de webpagina iets nodig als:
<link rel="stylesheet" href="css/styles.css">
in de <head> gedeelte van uw html-pagina. In dit voorbeeld moet het lettertypebestand zich samen met de stylesheet in de css-map bevinden. Voeg hierna eenvoudig de class=”junebug” toe aan een tag in uw html om het Junebug-lettertype in dat element te gebruiken.
Als je de css in de eigenlijke webpagina plaatst, voeg dan de stijltag toe in de kop van de html, zoals:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
En de eigenlijke elementstijl kan ofwel worden opgenomen in de bovenstaande <style>en per element worden aangeroepen door klasse of id, of u kunt de stijl gewoon inline met het element declareren. Met element bedoel ik <div>, <p>, <h1> of enig ander element in de html dat het Junebug-lettertype moet gebruiken. Met beide opties zou het lettertypebestand (Junebug.ttf) zich in hetzelfde pad moeten bevinden als de html-pagina. Van deze twee opties ziet de best practice er als volgt uit:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>
en
<h1 class="junebug">This is Junebug</h1>
En de minst acceptabele manier zou zijn:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
en
<h1 style="font-family: Junebug;">This is Junebug</h1>
De reden dat het niet goed is om inline-stijlen te gebruiken, is dat de beste praktijk dicteert dat stijlen allemaal op één plek moeten worden bewaard, zodat bewerken praktisch is. Dit is ook de belangrijkste reden dat ik aanbeveel om de allereerste optie te gebruiken om externe stijlbladen te gebruiken. Ik hoop dat dit helpt.
Antwoord 6
er is een eenvoudige manier om dit te doen:
voeg in het html-bestand toe:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />
Opmerking: je zet de naam van het .ttf-bestand dat je hebt.
ga dan naar je css-bestand en voeg toe:
h1 {
color: blue;
font-family: vermin vibes;
}
Opmerking: u geeft de naam van de lettertypefamilie op van het lettertype dat u heeft.
Opmerking: schrijf de naam van de font-familie niet als uw font.ttf-naam
voorbeeld: als uw font.ttf-naam is: “vermin_vibes.ttf” zal uw font-familie zijn: “vermin vibes” font-familie bevat geen speciale tekens als “-,_”…etc het kan alleen spaties bevatten.