2014-11-22 27 views
7

Bu nedenle, JavaScript'i çalışma zamanında, hatta CSS öğelerini kullanarak her şeyi gözden geçirin. Fakat npm ile font-awesome gibi fontları nasıl kullanabiliyorum ve browserify.Yazı tipleri ile tarayıcı nasıl kullanılır?

A npm pacakge şu an burada bulunmaktadır: https://www.npmjs.org/package/font-awesome Ancak tarayıcılarım için yazı tiplerini grunt veya gulp gibi başka bir araç kullanmadan nasıl paketleyebilirim?

// düzenlemek

benim html artık fa sınıfını kullanmak istiyorsanız, benim html dosyasında node_modules/font-awesome/css/font-awesome.css işaret daha başka bir yolu var mı?

Otomatik bir çözüm arıyorum çünkü font-awesome gibi çeşitli kütüphanelerim varsa ve fontlar, resimler ve diğer dosyalar gibi kendi varlıklarını getiriyorlarsa, her varlık dosyasına el ile işaret etmek istemiyorum. benim html dosyası.

Yeşim ile public içinde bazı dosyalara hizmet verebilirim. Ve public, fontlar, resimler, vb. Gibi uzak bağımlılıklarım aracılığıyla gelen tüm varlıkları içerir. Ancak, node_modules ile ilgili tüm dosyaları otomatik olarak public kopyalamak veya symlink nasıl?

+0

"bundle" terimini kastediyorsunuz. 'npm install font-awesome', node_modules dizinindeki tüm font-müthiş şeyleri yükler ve uygulamanızı basitçe, kaynakları almak için statik bir direk olarak'./node_modules/fontawesome'ı işaret edecek şekilde ayarlayabilirsiniz. Soru türünüz, uygulamanızı/sitenizi/sitenizi barındırmak için kullandığınız şey gibi daha fazla ayrıntıya ihtiyaç duyar. Ayrıca, neden alçakgönüllülük/gulp ihtiyacı bile uzaktan sorunlu olabilir? Açıkça zaten düğüm kullanıyorsunuz ve tarayıcıyı tıklıyorsunuz, Grunt/Gulp ekleyerek sadece iyi bir uygulama. –

+0

Teşekkürler, benim soru – timaschew

+0

güncellendi başka bir şey kullanıyorsunuz, ya da sadece bir düz .html dosyası ve npm yüklü fontawesome mı? (ör. ekspres kullanıyor musunuz? jekyll, vb kullanıyor musunuz?) –

cevap

2

Bunu yapmanın kolay bir yolunu biliyorum. Yazı tiplerini Base64 biçiminde kullanın. Bu şekilde Yazı tipi verileri, harici dosyalarda değil, CSS içinde dinlenir.

Ardından CSS'nizi her zamanki gibi ("insert-css" veya "cssy" gibi modüller ile) Browser'unuza yükleyin. Stylus'u kullandığım için "stylify" kullanıyorum) ve CSS tanımlarını pipettiğinde yazı tipi verilerini kendisi taşır.

Önceden Base64 kodunuzu sıkıştırmak da iyi bir fikirdir. Ya da Uglify'nin sonunda sıkıştırmayı yapmasına izin verin. Sonuçları karşılaştırın.

Hedef tarayıcılarınızın Base64 yazı tiplerini desteklemelerini iki kez kontrol edin.