css yazı tipi bağlantısı ttf. Yazı tiplerini css'de ayarlayın

Yazı tipleri, web sitesi tasarımında büyük rol oynar. Farklı yazı tipleriyle yazılmış aynı metin, bir kişi üzerinde zıt izlenimler üretebilir.

Kendin için gör:

Bazı yazı tipleri daha inandırıcı, diğerleri daha ilgi çekici görünüyor.

Ancak herhangi bir yazı tipini siteye nasıl bağlayabilir ve bunları istediğiniz yere nasıl uygulayabilirsiniz?

Bu yazıda ben sana 3 yol göstereceğim, sitenize en çeşitli ve standart olmayan yazı tiplerini bağlayabileceğiniz. Hangi CMS'yi kullandığınızın bir önemi yok: WordPress, Joomla, Drupal veya Open Cart.

Yazı tiplerini siteye bağlamada karmaşık bir şey olmadığını göreceksiniz.

Öğreneceksiniz:

Yöntem numarası 1. Yazı tiplerinin bir WordPress sitesine hızlı bağlantısı (zorluk: ⭐ ⭐ ⭐)

Sitenizde premium tema yüklü ise 2 dakika içerisinde yazı tiplerini bağlayabilirsiniz.

Örneğin:

Makale başlıklarınızın yazı tipini değiştirmek istiyorsunuz. Bunun için:

1. Yönetici panelinde Tema Seçenekleri bölümüne gidin. Şablonunuza bağlı olarak, bu bölüm biraz farklı olarak adlandırılabilir, ancak anlamı her zaman aynıdır - "tema ayarları".

2. Tipografi bölümüne gidin.

3. Yazı tipini değiştirmek istediğiniz öğeyi seçin (başlıklar, paragraflar):

Siteniz farklı bir motorda çalışıyorsa veya temanız bu tür ayarları sağlamıyorsa sonraki yönteme geçin.

Yöntem numarası 2. Google Fonts'un gücünü kullanın
(zorluk: ⭐ ⭐ ⭐ ⭐)

Google Fonts'u hiç duydunuz mu? Kısacası 700'den fazla yazı tipini sitenize bağlayabileceğiniz bir hizmettir.

Adım 1. Hizmetin resmi web sitesine gidin.

Adım 2. Google yazı tipi koleksiyonunda size uygun yazı tiplerini bulun. Sağ menüde yazı tipinin dilini, stilini ve popülerliğini ayarlayarak daireyi daraltabilirsiniz:

Hizmetin Rus dilini destekleyen yazı tiplerini göstermesi için Diller öğesinde Kiril'i seçin.

Adım 3 Diyelim ki Roboto yazı tipini beğendiniz. "+" simgesine tıklayın:

"+" İşaretini tıklayarak herhangi bir yazı tipi ekleyebilirsiniz.

Adım 4. Bundan sonra, seçilen yazı tipleriyle sepeti genişletmeniz gerekir:

Özelleştir sekmesine giderek stilleri ve dilleri seçebilirsiniz. Stillerle ilgili olarak, standart bir set seçmenizi tavsiye ederim - normal (400), italik (400 italik), kalın (700) ve italik-kalın (kalın 700 italik):

Ancak yalnızca kalın (başlıklar için) istiyorsanız, yalnızca bunu seçin.

Unutmayın, ne kadar çok stil seçerseniz, yüklenen dosyanın boyutu o kadar büyük olur.

Sitenin yüklenme hızını düşürmemek için mümkün olduğunca az yazı tipi stili seçin.

Adım 5. Gömme bölümüne dönün ve @IMPORT sekmesini seçin. Ardından, "@import" içeren kod satırını kopyalayın ve sitenizin CSS dosyasının ilk satırına yapıştırın:

Bir WordPress siteniz varsa, CSS dosyası büyük olasılıkla burada bulunur: wp_content/themes/"sizin temanız"/css/... CSS klasöründe, büyük olasılıkla, ekleme kodunu Google'dan aktarmanız gereken bir Fonts dosyası olacaktır:

Sitenizin hangi CMS üzerinde çalıştığı önemli değil, sadece kodu yapıştırın ve her şey 👌

Önce yazı tiplerinin yüklenmesi gerektiğinden, ancak o zaman diğer her şey - yazı tipi bağlantı kodunu CSS dosyasının en başına yerleştirin.

Aynı CSS dosyasında sitenin belirli öğeleri için yazı tipi tanımlayabilirsiniz.

Örneğin:

Tüm paragraflara Roboto yazı tipi vermek için şunu yazacağım: p ( yazı tipi ailesi: Roboto;)

Yöntem numarası 3. CSS kullanarak özel yazı tipi bağlantısı (zorluk: ⭐ ⭐ ⭐ ⭐ ⭐)

Yeterince yetenekliyseniz, en iyi seçeneğiniz, yazı tiplerini CSS aracılığıyla kendiniz eklemektir. Bu durumda yazı tipleri sunucunuzda özel bir klasörde yer alacaktır. Ama önce onları bir yere götürmelisin.

Site için web yazı tiplerini nereden edinebilirim?

Web yazı tiplerini kullanmak için ayrı bir lisans satın almanız gerektiğini biliyor muydunuz?

Yazı tiplerini ücretsiz bir lisansla bağlayın. Onları bulmanın en kolay yolu, yapacağımız Fontsquirrel hizmetidir.

Adım 1. Hizmetin resmi web sitesine gidin

Adım 2. Sağdaki menüde Diller bölümünde Kiril'i seçin.

Adım 3. Uygun bir yazı tipi bulun. Yazı tipi sayısına dikkat edin.

Örneğin, 4 stil varsa, 4 Stil yazılacaktır:

Yazı tipi stillerinin belirlenmesi - normal (400/normal), italik (italik), kalın (700/kalın), kalın italik (700 italik).

Adım 5. Yazı tipinin adına tıklayın ve ayarlar sayfasına gidin.

Adım 6. Webfont Kit bölümüne gidin. Tüm yazı tipi biçimlerini seçin ve @FONT-FACE KIT'i İndir'e tıklayın. Sadece 1-2 format mevcutsa, korkutucu değil.

Fontları dahil etmek için @Font-face kullanın

@font-face yönergesi ile sitenize bir veya daha fazla font ekleyebilirsiniz. Ancak bu yöntemin artıları ve eksileri vardır.

Artıları:

CSS aracılığıyla, herhangi bir biçimdeki yazı tiplerini dahil edebilirsiniz: ttf, otf, woff, svg.
Yazı tipi dosyaları sunucunuzda bulunacaktır - üçüncü taraf hizmetlere bağımlı olmayacaksınız.

eksileri:

Her stil için yazı tipinin doğru bağlanması için ayrı bir kod yazmanız gerekir.
CSS bilmeden kafa karıştırmak kolaydır.

Bitmiş kodumu ve değerlerinizi nereye koymanız gerektiğini kopyalayabilirsiniz.

Adım 1. İndirilen yazı tipi dosyalarını sitenize aktarın. Bu, barındırma kontrol paneliniz veya FTP aracılığıyla yapılabilir.

CSS dosyanızla aynı dizinde bir yazı tipi klasörü oluşturmanızı öneririm. Tüm yazı tipi dosyalarını bu klasöre taşıyın.

Adım 2. Aşağıdaki girişi CSS dosyasının en başına yazın:

@yazı tipi-yüz(
yazı tipi ailesi: "MyWebFont";
kaynak: url("../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") formatı("eot"),
url("../fonts/WebFont.woff") formatı("woff"),
url("../fonts/WebFont.ttf") formatı("truetype"),
url("../fonts/WebFont.svg#webfont") formatı("svg");
yazı tipi ağırlığı: normal
yazı tipi stili: normal
}

MyWebFont'un yazı tipinin adı olduğu ve src özelliğinin değeri (tırnak içindeki parantez içindeki veriler) bunların konumudur (göreceli bağlantılar). Her stili ayrı ayrı belirtmemiz gerekiyor.

İlk önce normal bir font eklediğimiz için font-weight ve font-style özelliklerini normal olarak ayarlıyoruz.

Adım 3. İtalik stili bağlarken aşağıdakileri yazın:

@yazı tipi-yüz(
yazı tipi ailesi: "MyWebFont";
kaynak: url("../fonts/WebFont-Italic.eot");
src: url("../fonts/WebFont-Italic.eot?iefix") formatı("eot"),
url("../fonts/WebFont-Italic.woff") formatı("woff"),
url("../fonts/WebFont-Italic.ttf") formatı("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") formatı("svg");
yazı tipi ağırlığı: normal
yazı tipi stili: italik;
}

Her şeyin aynı olduğu yerde, sadece font-style özelliğine italik değerini verdik.

Adım 4. Kalın stili etkinleştirmek için aşağıdaki kodu ekleyin:

@yazı tipi-yüz(
yazı tipi ailesi: "MyWebFont";
kaynak: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") formatı("eot"),
url("../fonts/WebFont-Bold.woff") formatı("woff"),
url("../fonts/WebFont-Bold.ttf") formatı("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") formatı("svg");
yazı tipi ağırlığı: kalın;
yazı tipi stili: normal
}

Font-weight özelliğini kalın olarak ayarladığımız yer.

Her stil için yazı tipi dosyaları için doğru konumu belirttiğinizden emin olun.

Adım 5. Kalın italik yazı tipini etkinleştirmek için aşağıdakini yazın:

@yazı tipi-yüz(
yazı tipi ailesi: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") formatı("eot"),
url("../fonts/WebFont-Italic-Bold.woff") formatı("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") formatı("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") format("svg");
yazı tipi ağırlığı: kalın;
yazı tipi stili: italik;
}

İşte bu kadar :) Sitenize 4 yazı tipi stili eklediniz.

Ancak bir not var - bu yazı tipi bağlantısı Internet Explorer 8 tarayıcısında doğru şekilde görüntülenmeyecek.Teselli, çok azının kalmasıdır.

Farklı CMS'deki siteler için yazı tipleri nasıl bağlanır

Sitenizin hangi motorda olduğu önemli değil (WordPress, Joomla, Drupal, Opencart) - CSS dosyasına erişiminiz varsa, yazı tiplerini Google Fonts üzerinden veya Fontsquirrel üzerinden sunucunuza yükleyerek bağlayabilirsiniz.

Tamam şimdi her şey bitti. Bu makalenin diğer web yöneticileri için yararlı olabileceğini düşünüyorsanız, lütfen sosyal ağlarda paylaşın.

Birlikte:

Bültenime abone ol faydalı ve ilginç blog yazılarını kaçırmamak için.

Ciddi ve ilginç düzenler oluşturan pek çok tasarımcı, tonlarca benzersiz ve güzel yazı tipine sahiptir. Bu tür yazı tipleri sayesinde tasarım lezzetini ve münhasırlığını kazanır. Ancak standart olmayan yazı tipleri yalnızca önceden yüklenmiş oldukları bilgisayarda görüntülenecektir, bu nedenle, onlarla düzgün çalışabilmesi için tasarımcı, düzeninde kullandığı tüm yazı tiplerini size sağlamalıdır. Çünkü mizanpajı düzenlerken bu yazı tiplerini bilgisayarınıza yüklemeniz gerekecek. Ancak sitenizin kullanıcısı tüm yazı tiplerini kendisi için indirmeyecek ve bilgisayarına yüklemeyecektir, bu nedenle tarayıcının gerekli yazı tiplerini kendi başına açmasını sağlamanız gerekir. Kural burada yardımcı olacaktır, Cufon'u kullanmak veya Google Webfonts veya Fontsquirrel'den yazı tipleri indirmek için hala seçenekler var, ancak Google Webfonts ve Fontsquirrel'in bir yazı tipine ihtiyacı olmayabilir, bu nedenle en iyi seçeneği düşünün - benzersiz yazı tiplerini @font-face kullanarak bağlama.

Bir yazı tipini eklemenin en kolay yolu, onu bir stil sayfasına yazmaktır:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body( font-family: "PF Din CompPro", Arial, sans-serif ; )

Burada 'PF Din CompPro' yazı tipi adıdır ve daha sonra gerekli site öğeleri için bu yazı tipini belirtebilirsiniz ve yazı tipleri/pfdintextcomppro-medium-webfont.ttf yazı tipinize giden yoldur, ki bu yazı tipleri klasöründedir, yazı tipi dosyasında adında boşluk olmaması önemlidir, bunları tire ile değiştirmek daha iyidir.

Bu en kolay yoldur, ancak tüm tarayıcılarda çalışmaz ve bu büyük bir sorundur.

Her tarayıcı kendi yazı tipi biçimlerini destekler:
gerçek tip Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+ için Yazı Tipleri
EOT Internet Explorer 4+ için yazı tipleri
WOFF Firefox 3.6+, Internet Explorer 9+, Chrome 5+ için yazı tipleri
SVG iPad ve iPhone için Yazı Tipleri

Bu nedenle, .ttf formatındaki yazı tiplerinizin birinden aynı yazı tiplerinden birkaçını sadece farklı bir formatta yapmanız gerekecektir. Fontsquirrel.com'daki yazı tipi oluşturucunun kullanışlı olduğu yer burasıdır. Bu sayfada, yazı tipinizi yükleyin, Optimal ayarları seçin, indirilen yazı tipinin yasallığını onaylayan onay kutusunu işaretleyin (bazı yazı tipleri çok maliyetlidir ve bunları kullanma izniniz olmalıdır), ardından "Kitinizi İndirin" düğmesini tıklayın. ve yazı tipinizin tüm biçimleriyle gerekli arşivi alacaksınız.

Fontlarınızın tüm formatlarını arşivden indirin, teorik olarak bunlar .eot, .svg, .ttf ve .woff uzantılı 4 dosyadır, bu dosyaları web sitenizdeki fontlar klasörüne kopyalayın, stylesheet.css dosyası da olacaktır. arşivde olun - içinde yazı tiplerini bağlamak için tüm kurallar zaten yazılacak, bunları stil sayfanıza güvenle kopyalayabilirsiniz, sadece yazı tipi dosyalarına, örneğin yazı tipleri klasörüne giden yollarınızı belirtmeyi unutmayın. Sitelerimden birinde olanlara bir örnek:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix" ) format("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") format("truetype" ), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg"); yazı tipi ağırlığı: normal; yazı tipi stili: normal; ) gövde( yazı tipi ailesi: "PF Din CompPro", Arial, Tahoma, Verdana, sans-serif; )

Bu ayarlarla, sevgili IE-7-8-9 da dahil olmak üzere tüm tarayıcılarda yazı tipleri görüntülenir.

Kiril alfabesi için, yani Rusça karakterler için standart olmayan yazı tipleri kullanıyorsanız ve yazı tipi sitede yanlış görüntüleniyorsa, http://www.fontsquirrel.com/tools sayfasında gelişmiş ayarlarla bir yazı tipi oluşturmak yardımcı olabilir. /webfont-generator yazı tipinizi indirin ve "Uzman" ayarlarını seçin. Çok fazla ayar var, her şeyi bilmiyorum, ancak dikkatlice okuyun ve ihtiyacınız olanları seçin ve Kiril'i desteklemek için Alt Ayar bloğunda: Özel Alt Ayar bölümünde ... öğesini seçin ve Kiril onay kutusunu işaretleyin ve ayrıca ihtiyacınız olan dilleri ve biçimleri işaretleyin.

Aldıklarıma bir örnek:

Bir site ziyaretçisi, tarayıcı geliştirmenin bu aşamasında standart olmayan bir Web yazı tipini kullanırken gerçekte ne görür?

Birçoğu bir site oluştururken acı çekiyor. Çoğu durumda, site standart olmayan bir yazı tipi veya hiyeroglif kullanılmasını gerektirir. Güzel bir yazı tipi indirirsiniz ve sayfayı düzenlemeye başlarsınız, ancak tüm kullanıcılarda bu tür yazı tipleri yoktur. Bazıları utanmaz ve ihtiyaç duydukları yazı tipini kullanarak bir grafik dosyası oluştururlar, ancak ek grafikler her zaman sayfaya sığmaz ve birçoğunda zaten yeterince vardır. Ama uygun bir çıkış yolu var! Bu çıkış yolu, CSS teknolojisini (Basamaklı Stil Sayfaları) veya basitçe "Basamaklı Stil Sayfalarını" kullanmaktır. Genellikle CSS, oluşturulan dosyanın kendisinde, sayfada bulunur, ancak ayrı olarak bir CSS dosyası (.css) oluşturabilir ve etiket arasına dolgu yaparak bağlayabilirsiniz. Böylece:

Ve CSS yardımıyla True Type Font (.ttf) yazı tipi dosyasını otomatik olarak indirip kurmamız gerekiyor, ancak kurulum sadece kullanıcının bilgisayarı gerekli yazı tipini algılamadığında gerçekleşecek. Öncelikle yazı tipinin konumunu belirtmeliyiz. Bunu yapmak için etiketlerin arasına yazıyoruz. ve Böyle:

Böylece sitenizde istediğiniz yazı tipini kullanabilirsiniz. Ancak bir yazı tipini indirme ve yükleme işlemi de belirli bir süre gerektirdiğinden çok karmaşık olmamanızı tavsiye ederim. Ve yazı tipinizin kendisi 500 kb veya daha fazla "ağırlığa sahipse", bu durumda kullanılması önerilmez.

Dürüst olmak gerekirse, bunu yapmak daha kolay ve daha doğru:

Web yazı tipleri çoğu tarayıcı tarafından desteklense de, en başından beri Opera'da sorunludurlar. Bazı sistemlerde hiç çalışmıyorlar, çalışan sistemlerde sayfaları yeniden yüklerken çalışabilirler veya çalışmayabilirler:

Bu nedenle, bu ciddi projelerde kullanılmamalı, yalnızca kişisel bloglarda ve yalnızca 30 pikselden büyük metinler için, kenar yumuşatma ve karakter aralığının harikalarını görmemek için kullanılmalıdır.

Aynı zamanda Google sağlar - Standart olmayan yazı tiplerinin tarayıcılar arası bağlantısı için API.