Simgeleri Web Yazılarına Dönüştürme
Yaptığım bir web sitesi tasarımı için bazı düzgün simgeler oluşturmuştum ve yeni siteyi eski bir iPad'de önizlemiştim. Düzen normal boyutta Tamam görünüyordu, ancak sayfanın bir kısmına zum yapıyordu, birdenbire simgemin bulanık bir karmaşa olduğunu gördüm, metin tabanlı başlık hala net ve keskin. Yeni bir Retina ekranlı iPad'de, simgeler normal boyutta bile çok keskin görünmüyordu.
Sahip olduğum ilk fikir, çift boyutlu hareketli görüntü oluşturmak ve bunları CSS kullanarak boyutlarının yarısını gösterecek şekilde ayarlamaktı. Bu, normal boyutta bir Retina ekran üzerinde daha iyi görünmesini sağlarken, çimdiklemeye ve yakınlaştırmaya başladığınız anda, bulanıklık geri döndü. Ancak bu metin hala net ve keskin.
Cevap açıktı. Simgelerimi bir yazı tipine dönüştürmem gerekiyordu.
Bu öğreticide, IcoMoon adında harika bir ücretsiz web uygulaması kullanarak vektör ikonlarının web yazı tipine nasıl dönüştürüleceğine bakacağız. Ardından, oluşturulan yazı tipi dosyalarının ve CSS'nin bir web sayfasında nasıl kullanılacağına bakacağız.
Bir simge yazı tipi kullanmanın avantajları
Bir simge fontunun, görüntü netliğine ek olarak bitmap görüntülerine göre çeşitli avantajları vardır.
- Uygunluk: Bir simge yazı tipi, bir dizi görüntüden çok daha küçük olacaktır, özellikle Retina ekranları için çift boyutlu görüntüler kullandıysanız. Yazı tipi yüklendikten sonra, simgeleriniz bir görüntü indirmeye gerek kalmadan anında işlenir.
- Ölçeklenebilirlik: bir simge yazı tipini ayarlayarak herhangi bir boyuta ayarlanabilir
font-sizeberaberindeki CSS'de mülkiyet. Bu, farklı boyutlarda denemenizi sağlar; bitmap görüntüler için, her boyutta bir görüntü dosyası çıkarmanız gerekir. - Esneklik: renkler, gölgeler ve devrilme durumları dahil olmak üzere simgenize kolayca metin efektleri uygulanabilir. Ayrıca herhangi bir renk veya görüntü arka planına da iyi göstereceklerdir.
- Uyumluluk: web yazı tipleri, tüm modern tarayıcılar ve eski tarayıcılar tarafından da, IE 6 ve daha önceki sürümler tarafından desteklenir.
Yani, başlayalım!
Bir simge yazı tipi oluşturma
Sembol yazı tipleri, özel bir yazı tipi oluşturma uygulaması kullanılarak oluşturulabilir Glifler ancak profesyonel bir tipografi aracı, karakterler (yani karakter aralığı ve bitişik harfler) arasındaki ilişkinin önemli olmadığı basit bir simge yazı tipi oluşturmanın gereklilikleri veya gereksinimlerinin ötesindedir.
Şimdiye kadar en kolay yolu denilen harika bir ücretsiz çevrimiçi uygulama kullanmaktır IcoMoon Keyamoon tarafından, sembolleri bir web yazı tipine dönüştürmenin tüm zorluklarını ortadan kaldırarak.
Bu HTML5 uygulaması, simge fontları oluşturma gibi basit kullanımlar için font dosyaları oluşturmanın tüm acılarını ortadan kaldırır. IcoMoon, halihazırda yüklenen bir dizi simge seti ile birlikte gelir ve çoğunu ücretsiz olarak kullanabileceğiniz kütüphanenize daha fazla ekleyebilirsiniz (lisansı kontrol edin). “Dosya indirme” ve “alışveriş sepeti” gibi oldukça standart bir ikon arıyorsanız, bunlardan birini kullanarak kendi başınıza yaratmanız tercih edilebilir.
Adım adım
1. Çizimlerinizi hazırlayın
Başlamak için, Illustrator veya Inkscape gibi SVG biçiminde dışa aktarabilen bir vektör çizim programındaki simgeleri oluşturmanız gerekir.
Tasarım yaparken, istediğiniz herhangi bir renkle çalışabilirsiniz, ancak simgeler tek bir düz renk olmalıdır. Her simgenin yaklaşık olarak aynı boyutta olduğundan emin olun. Bir simgenin diğerinden daha uzun veya daha uzun olması tutarlı bir yazı tipi oluşturmayı zorlaştırır. Burada, zeplin ikonunun genişliğini azaltmak zorunda kaldım, böylece diğerleriyle eşleşsin.
2. temizlemek
Kusurların bulunmadığından emin olmak için her simgeyi dikkatlice kontrol edin - daha küçük boyutlarda OK'nin gözüktüğü detaylar, yakınlaştırıldığında küçük kusurları gizleyebilir. Aşağıda gösterilen simgede, katmanlama öğeleri sırasında süzülen pürüzlü adımları kaldırmam gerekiyor.
Illustrator'da, çakışan öğeleri birleştirmek için Yol Bulucu aracını ve bu simgelerdeki yıldız gibi kesme öğelerini kaldırmak için Eksi Ön öğesini kullanın.
Temel ilke, simgenizin küçük ölçeklerde okunabilmesini sağlamaktır. Mümkün olduğunca basitleştirin.
3. SVG'ye aktar
Şimdi bir simge seçin ve kopyalayıp yeni bir kare belgeye (örneğin, 200 × 200 piksel) yapıştırın. Simgeyi sığacak şekilde ölçeklendirin. Bir taban çizgisi cetveli ayarlamak yararlı olabilir. Simgeyi beyaz bir arka plan üzerinde düz siyah olacak şekilde renklendirin.
Şimdi seç File… Save as ve dosyayı bir SVG dosyası olarak kaydedin. Varsayılan SVG ayarlarını kullanın. Bunu tüm simgeler için yaptıktan sonra bir web yazı tipi oluşturmaya hazırsınız.
4. IcoMoon'a aktarın
Aç IcoMoon web uygulaması . Bir simgeyi içe aktarmak için, “Simgeleri İçe Aktar” düğmesine tıklayın ve eklemek istediğiniz SVG dosyalarını seçin - aynı anda birden fazla dosya ekleyebilirsiniz. Bunlar “Kişisel Simgeleriniz” altında görünecektir. Sarı renkte vurgulanmışlarsa, oluşturacağınız simge yazı tipinin bir parçası olacaktır. Bu örnekte, kendi simgelerimden birini dışa aktarmamaya karar verdiğimi görebilirsiniz ve “Mini-simgelerinden” simgelerinden birini ekledim.
5. IcoMoon'dan dışa aktarma yazı tipi
Simgenin konumunu, boyutunu veya rotasyonunu ayarlamak isterseniz “Düzenle” düğmesine tıklayabilirsiniz. Simge varyasyonları oluşturmak için “Kopya Kaydet” düğmesini kullanın (örneğin, bir simgenin ayna görüntüsü). Simgeye anlamlı bir etiket ekleyin, çünkü bunun için sınıf adı oluşturmak için kullanılacaktır.
Hazır olduğunuzda, yazı tipini oluşturmaya başlamak için ekranın altındaki “Yazı” düğmesine tıklayın. Hangi simgenin hangi karakterle eşlendiğini atayabilirsiniz; Örneğin, simge setiniz bir dönen topun altı görüntüsü ise, altı kareye q, w, e, r, t ve y karakterlerini atayabilirsiniz. Tercihlerde bir yazı tipi adı seçin. Yazı tipinin metriklerini de ayarlayabilirsiniz, ancak standart yazı ile birlikte özel yazı tipinizi ayarlamadıkça, bunun için endişelenmenize gerek yoktur.
6. Yazı tipi dosyalarını indirin
Yazı tipi paketini makinenize indirmek için “İndir” seçeneğine tıklayın. Yazı tiplerini (WOFF, EOT ve TTF formatlarında), örnek bir HTML sayfasını ve ilgili CSS'yi içeren bir alt klasör olacaktır. IE 6 veya 7'yi desteklemeniz gerekiyorsa bir geçici çözüm içeren bir JavaScript dosyası bile var.
Yazı tiplerini projenize eklemek için yazı tipi alt klasörünü sitenize kopyalayın. CSS'yi style.css'den kendi sitenizin CSS dosyasına kopyalayıp yapıştırabilirsiniz, ancak yaklaşımım bunu fonts.css olarak yeniden adlandırmak ve ayrı bir CSS dosyası olarak saklamaktır. Ardından, göreli bağlantıyı kullanarak HTML dosyanızdaki bu CSS dosyasına bir referans eklemeniz gerekir:
<link rel="stylesheet" href="fonts.css" />CSS dosyasının @ font-face elemanında, URL referansını fontların yeni göreceli konumuna değiştirmeniz gerekecektir, yoksa fontlar klasörünüzü stil sayfası klasörünüze bırakabilirsiniz.
7. Yazıyı çağırmak
Örnek index.html dosyasında görebileceğiniz gibi, özel yazı tipine, karakterine (unicode veya name) veya sınıf adına göre iki şekilde başvurulabilir. İlk örnek HTML5 veri simgesi durumunu kullanır
<div aria-hidden="true" data-icon="g"></div>Burada, fs1 sınıfı yazı tipinin boyutunu ayarlamak için kullanılır. Ari-gizli referans, karakterin herhangi bir ekran okuyucu tarafından konuşulmamasını sağlamaya yardımcı olur.
İkinci yöntem bir span elemanı kullanır:
<span aria-hidden="true"></span>Bu yöntem, sembolün normal metinle satır içi oturmasını istediğinizde kullanışlıdır.
Simgeyi bir bağlantı yapmak istiyorsanız, hepsini bir hrefte paketleyebilirsiniz :
8. Gelişmiş fikirler
Vurgulu durumla yeni keşfettiğimiz gibi, simgenin rengini değiştirmek, CSS'deki renk özelliğini ayarlamak kadar kolaydır ve boyutu değiştirmek font boyutu özelliğini ayarlamak kadar kolaydır. Yazı tipi çözünürlüğünü korurken, metin gölgesi ve saydamlık gibi diğer özellikleri de ayarlayabilirsiniz.
Deneyin ve asla bitmap simgelerini bir daha kullanamayacağınızı garanti ederim.
Simgeler için yazı tiplerini kullanmayı denediniz mi? Onu nasıl buldun? Yorumlarda bize bildirin.