Yanıtlar:
Evet, @ font-face adlı CSS özelliğini kullanabilirsiniz. Sadece resmi olarak CSS3'te onaylandı, ancak CSS2'de önerildi ve uygulandı ve IE'de uzun süredir destekleniyor.
Bunu CSS'de şu şekilde beyan edersiniz:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}Ardından, diğer standart yazı tipleri gibi referans verebilirsiniz:
h3 { font-family: Delicious, sans-serif; }Yani, bu durumda,
<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>Ve sadece JUNEBUG.TFF dosyasını html dosyasıyla aynı konuma koymanız gerekir.
Yazı tipini dafont.com web sitesinden indirdim :
url, css dosyanızın bulunduğu yere göredir .
Mümkün olan en iyi tarayıcı desteği için CSS kodunuz aşağıdaki gibi görünmelidir:
@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;
}Daha fazla bilgi için CSS-tricks.com adresinde @ font-face kullanma makalesine bakın .
Çoğu modern tarayıcıda @ font-face özelliğini kullanabilirsiniz.
İşte nasıl çalıştığına dair bazı makaleler:
İşte yazı tipini uygulamanıza eklemek için iyi bir sözdizimi:
@ Font-face ile kullanmak üzere yazı tiplerini dönüştürmek için birkaç yer:
Ayrıca cufon, font-face kullanmak istemiyorsanız çalışır ve web sitesinde iyi belgelere sahiptir:
Bunu dene
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
} <div class="FontMarket">KhonKaen Market</div>vilis.org
Harici bir stil sayfası kullanıyorsanız, kod şöyle görünebilir:
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }Ve ayrı bir .css dosyasına (örn. Styles.css) kaydedilmelidir. .Css dosyanız sayfa kodundan ayrı bir konumdaysa, gerçek yazı tipi dosyası .html veya .php web sayfası dosyası DEĞİL .css dosyasıyla aynı yola sahip olmalıdır. Sonra web sayfasının aşağıdaki gibi bir şeye ihtiyacı vardır:
<link rel="stylesheet" href="css/styles.css">html sayfanızın <head> bölümünde. Bu örnekte yazı tipi dosyası, stil sayfasıyla birlikte css klasöründe bulunmalıdır. Bundan sonra, o öğede Junebug yazı tipini kullanmak için html'nizdeki herhangi bir etiketin içine class = "junebug" ekleyin.
Css'yi gerçek web sayfasına koyuyorsanız, stil etiketini html'nin başına ekleyin:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>Ve gerçek öğe stili ya yukarıdakilere dahil edilebilir <style>ve her öğe için sınıf veya kimliğe göre çağrılabilir ya da stili öğe ile satır içinde bildirebilirsiniz. Elemenle kastettiğim <div>, <p>, <h1> veya html içindeki Junebug yazı tipini kullanması gereken başka bir öğe. Bu seçeneklerin her ikisinde de, font dosyası (Junebug.ttf) html sayfası ile aynı yolda bulunmalıdır. Bu iki seçenekten en iyi uygulama şöyle görünecektir:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>ve
<h1 class="junebug">This is Junebug</h1>Ve en az kabul edilebilir yol:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>ve
<h1 style="font-family: Junebug;">This is Junebug</h1>Satır içi stilleri kullanmanın iyi olmamasının nedeni, en iyi uygulama stillerin hepsinin tek bir yerde tutulması gerektiğini belirtir, bu nedenle düzenleme pratiktir. Dış stil sayfalarını kullanmanın ilk seçeneğini kullanmanızı önermemin ana nedeni de budur. Umarım bu yardımcı olur.
Bunu yapmanın basit bir yolu var: html dosyasında ekleyin:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />Not: Sahip olduğunuz .ttf dosyasının adını girin. sonra css dosyanıza gidin ve ekleyin:
h1 {
color: blue;
font-family: vermin vibes;
}Not: Sahip olduğunuz yazı tipinin yazı tipi aile adını girersiniz.
Not: font-aile adını font.ttf adınız olarak yazmayın örnek: font.ttf adınız: "vermin_vibes.ttf" ise font-aileniz şöyle olur: "haşarat vibes" font ailesi özel karakter içermiyor "-, _" ... vb. olarak yalnızca boşluk içerebilir.
font-facebir ttf dosyası yerine CSS'de bir olarak tanımlamanız gerekir .