2015-08-13 35 views
14

Polimer Kağıt Öğeleri varsayılan yazı tipini Roboto'dan özel bir yazı tipine dönüştürmenin en iyi yolu nedir?Polimer kağıt öğelerini değiştirme varsayılan yazı tipi

Yazı tipimi tanımlamak için --paper-font-common-base: {} karışımını kullandım ve bu çoğu yerde çalışıyor ... ama hepsi değil. Örneğin paper-toolbar gibi yerlerde hala Roboto uygulanmaktadır.

Bunu yapmanın başka bir yolu var mı?

DÜZENLEME şimdi suçlu görüyorum. paper-styles/typography.html İçinde

--paper-font-title: { /* @apply(--paper-font-common-base) */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; /* @apply(--paper-font-common-expensive-kerning); */ text-rendering: optimizeLegibility; /* @apply(--paper-font-common-nowrap); */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20px; font-weight: 500; line-height: 28px; }; 

Neden burada @apply blok yorum haline örn ... özellikle fontu tespit Mixins yükler vardır? Bu varsayılan olarak yorumlanmamışsa, bu bir sorun olmaz. Ama şimdi her karışıma gitmek zorundayım!

Orada bir not typography.html dosyası

/* 
Unfortunately, we can't use nested rules 
See https://github.com/Polymer/polymer/issues/1399 
*/ 

üst kısmındadır Ama bu yine de Chrome'da, gerçek olamayacak kadar görünmüyor bkz

DÜZENLEME 2. Tüm karıĢımlarda @apply(--paper-font-common-base) satırlarını rahatsız edersem işe yarıyor. Bu bir tarayıcı sorunu mu?

+0

Küresel seçici '* {}' 'yazı tipi ailesi ile paralel olarak! Important' olsa geçici bir çözüm olarak kullanılabilir – WildDev

cevap

2

--paper-font-common-base karışımını geçersiz kılmak doğru yaklaşımdır.

Aşağıdaki CSS kodu çalışmalıdır.

:root { 
    --paper-font-common-base: { 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    }; 
} 

Belirttiğiniz sorunu bulamadım, büyük olasılıkla zaten giderildi. Aşağıdaki dosyaları denetlerken, --paper-font-common-base beklendiği gibi uygulanır.

https://github.com/PolymerElements/paper-styles/blob/master/typography.html https://github.com/PolymerElements/paper-toolbar/blob/master/paper-toolbar.html

İlgili konular