Google'ın Roboto yazı tipini bir web sitesinde nasıl kullanabilirim?

165

Google'ın Roboto yazı tipini web sitemde kullanmak istiyorum ve bu öğreticiyi takip ediyorum:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

Ben böyle bir klasör yapısı olan dosyayı indirdik:

resim açıklamasını buraya girin

Şimdi üç sorum var:

  1. URL’mde css var media/css/main.css. Bu klasörü nereye koymam gerekiyor?
  2. Tüm alt klasörden tüm eot, svg vb. Ayıklayıp klasöre koymam gerekir fontsmi?
  3. Css dosyası fonts.css oluşturmam ve temel şablon dosyama eklemem gerekir mi?

Bunu kullandığı örnek

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

Dir yapısına sahip olmak istiyorsanız, URL'm nasıl görünmelidir:

/media/fonts/roboto

html  css  fonts 
— user26
kaynak

Yanıtlar:

259

Bunların hiçbirini gerçekten yapmanız gerekmez.

  • Google'ın Web Yazı Tipleri sayfasına gidin
  • aramak Robotosağ üstteki arama kutusuna
  • Kullanmak istediğiniz yazı tipinin varyantlarını seçin
  • üst taraftaki 'Bu Yazı Tipini Seç'i tıklayın ve ihtiyacınız olan ağırlıkları ve karakter setlerini seçin.

Sayfa, <link>sayfalarınıza eklenecek bir öğe ve font-familyCSS'nizde kullanılacak örnek kuralların bir listesini verecektir .

Google yazı tiplerini bu şekilde kullanmak kullanılabilirliği garanti eder ve kendi sunucunuz için bant genişliğini azaltır.

— Sunil Garg
kaynak
Bunun için teşekkürler, bu mükemmeldi. Google Play Store'daki oynatma listesi foonts için Google'ın hangi ayarı kullandığını biliyor musunuz? tam olarak böyle bir stil sahibi olmak istiyorum. Ayrıca bağlantıda bağlantı veya kod snippet'i bulamadım. orada yazı tiplerini görüyorum ama kod yok
— user26
3
Harika bir şey, onlar da LESS dosyaları için bir @import sağlar! Ancak, internet bağlantısı olmadan test VEYA Google bağlantı sorunları (örneğin: Çin) = NO Yazı Tipleri ... Roboto Black (Roboto Bk) olmadığını da fark ettim font-family: aslında sadece 3 font ailesi kullanıyorlar (Roboto, Roboto Condensed ve Roboto Slab) diğer tüm Roboto varyantları font-styleve font-weightCSS değişiklikleri yoluyla yapılır . İdeal olarak, Google'ı yerleştirdikten sonra <link>yazı tiplerinin gerçekten orada olup olmadığını kontrol edin. Değilse, kendiniz kullanın (btw bir yazı tipi ailesinden tüm dosyaları yüklemek normalde 0,5 MB'ı geçmez).
— Armfoot
7
@ user26 <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>Bu, tüm stilleri yalnızca bir font ailesinden yükler: Roboto. Ancak, Google Fonts'ta ( Roboto Black gibi ) bir font ailesine ihtiyacınız varsa , klasörlerinizdeki dosyalara ihtiyacınız vardır ve sorunuzda bize gösterdiğiniz örnek kodu main.css'nize kopyalayın (bunun gibi @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.veya önerdiğim gibi) cevabım).
— Armfoot
14
-1 için Using Google's fonts this way guaranties availability. Hiçbir şey "kullanılabilirliği garanti etmez", çok daha az Google yazı tipi. Google'ın CDN'sini kullanan tonlarca web sitesinin düzgün yüklenmediği veya hiç yüklenmediği milyarlarca kişiden biri oldum. Kimseye ne yapacağını söylemiyorum, ancak Google'ın CDN'sinin mükemmel bir çözüm olduğunu düşünmeyin.
— Nateowami
1
-1. @Nateowami'nin belirttiği gibi, Google'ın sunucularına güveniyorsunuz (belirli ülkelerde engellenebilir), gizlilik için kötüdür ve yazı tiplerinizi bir CDN'de kendiniz barındırıyorsanız performans daha iyi olabilir. Daha fazla iş ama bu senin işin, değil mi?
— Robin Métral
72

Sayfalarınızda lisanslı web yazı tiplerini kullanmak için kullanabileceğiniz İKİ yaklaşım vardır:

  1. Typekit, Fonts.com, Fontdeck gibi Yazı Tipi Barındırma Hizmetleri, tasarımcılara satın alınan yazı tiplerini yönetmeleri ve yazı tipini sunan dinamik bir CSS veya JavaScript dosyasına bağlantı oluşturmaları için kolay bir arayüz sağlar. Google bu hizmeti ücretsiz olarak sunmaktadır ( burada istediğiniz Roboto yazı tipine bir örnek verilmiştir). Typekit, yazı tiplerinin tarayıcılarda aynı pikselleri kullanmasını sağlamak için ek yazı tipi ipuçları sunan tek hizmettir.

Google ve Typekit tarafından kullanılanlar gibi JS yazı tipi yükleyicileri (örn. WebFont yükleyicisi) , meydana gelebilecek FOUT'u veya yazı tipini indirirken yanıt zaman aşımlarını yönetmeye yardımcı olmak için CSS sınıfları ve geri çağrılar sağlar .

    <head>
      <!-- get the required files from 3rd party sources -->
      <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

      <!-- use the font -->
      <style>
        body {
          font-family: 'Roboto', sans-serif;
          font-size: 48px;
        }
      </style>
    </head>
  1. DIY yaklaşımı, web kullanımı için lisanslı bir yazı tipi almayı ve (isteğe bağlı olarak) dosya boyutunu optimize etmek için FontSquirrel'in jeneratörü (veya bazı yazılımlar) gibi bir araç kullanmayı içerir. Ardından, @font-facefontları etkinleştirmek için standart CSS özelliğinin çapraz tarayıcı uygulaması kullanılır.

Bu yaklaşım, dosya boyutunu dahil etmek ve dolayısıyla dosya boyutunu kontrol etmek için karakterler üzerinde daha ayrıntılı bir kontrole sahip olduğunuzdan daha iyi yük performansı sağlayabilir.

    /* get the required local files */
    @font-face {
      font-family: 'Roboto';
      src: url('roboto.eot'); /* IE9 Compat Modes */
      src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('roboto.woff') format('woff'), /* Modern Browsers */
      url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
    
    /* use the font */
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }

Uzun lafın kısası:

@ Font-face bildirimi ile birlikte font barındırma hizmetlerini kullanmak, genel performans, uyumluluk ve kullanılabilirlik açısından en iyi çıktıyı verir.

Kaynak: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternative/

GÜNCELLEME

Roboto: Google'ın imza yazı tipi artık açık kaynak kodlu

Artık burada bulunan talimatları kullanarak Roboto yazı tiplerini manuel olarak oluşturabilirsiniz .

— Ashesh Kumar Singh
kaynak
17

Eski yazı, biliyorum.

Bu, CSS kullanılarak da mümkündür @import url:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}
— rocksteady
kaynak
8
Çözümünüz performans önleyici bir kalıptır. İşaretlemenizde bir bağlantı etiketi kullanmak, Google'ın CSS dosyasının @import ile karşılaştırıldığında daha erken indirilmesine neden olur; tarayıcı sadece daha önce genel olarak ve özellikle ön yükleyici nedeniyle kaynak referansını keşfeder (HTML'yi ayrıştırırken vs. içe aktarılan stil sayfasını indirin).
— Radko Dinev
3
Şart değil. Webpack ve eklentileri kullanarak, bunların hepsi dağıtım derlemenize gömülecektir.
— Spock
6

srcÜzerinde hepsini koyun nedenle eğer yazı tipi dosyaları doğrudan atıfta /media/fonts/robotoböyle senin main.css onlara başvurmalıdır: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

..Senin bahsettiğin anlamına gelen bir klasör gider mediamain.css ise klasörüne /media/cssklasörüne.

../fonts/roboto/CSS'deki tüm url referanslarında kullanmanız gerekir (ve dosyaların bu klasörde olduğundan ve gibi alt dizinlerde olmadığından emin olun roboto_black_macroman).

Temel olarak (sorularınıza cevap):

Medya / css / main.css url dosyamda css var. Bu klasörü nereye koymam gerekiyor?

Onu orada bırakabilirsiniz, ancak kullandığınızdan emin olun. src: url('../fonts/roboto/

Tüm alt klasörden tüm eot, svg vb ayıklamak ve yazı tipleri klasörüne koymak gerekir mi

Bu dosyalara doğrudan başvurmak istiyorsanız (alt dizinleri CSS kodunuza yerleştirmeden), evet.

Css dosyası fonts.css oluşturmam ve temel şablon dosyama eklemem gerekiyor mu

Mutlaka bu kodu main.css dosyasına ekleyebilirsiniz. Ancak yazı tiplerini özelleştirilmiş CSS'nizden ayırmak iyi bir uygulamadır.

Kullandığım yazı tipi LESS / CSS dosyası örneği:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(Bu örnekte sadece ttf kullanıyorum) Sonra @import "fonts";main.less dosyamda kullanıyorum ( daha az bir CSS ön işlemcisi , bunun gibi şeyleri biraz daha kolay hale getiriyor )

— Armfoot
kaynak
2

Bu, bir CDN kullanmak zorunda kalmadan statik dağıtım için istediğim woff2 dosyalarını almak için yaptım

TEMEL OLARAK roboto yazı tiplerini index.html dosyasına yüklemek ve sayfanın yüklenmesine izin vermek için css için cdn ekleyin. google dev araçlarından kaynaklara bakın ve fonts.googleapis.com düğümünü genişletin ve css? family = Roboto: 300,400,500 & display = takas dosyasının içeriğini görüntüleyin ve içeriği kopyalayın. Bu içeriği varlıklar dizininizdeki bir css dosyasına yerleştirin.

Css dosyasında, tüm Yunan, cryllic ve vietnamca şeyleri kaldırın.

Bu css dosyasında aşağıdakilere benzer satırlara bakın:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

bağlantı adresini kopyalayın ve tarayıcınıza yapıştırın, yazı tipini indirir. Bu yazı tipini öğeler klasörünüze koyun ve burada ve css dosyasında yeniden adlandırın. Diğer bağlantılara bunu, 6 benzersiz woff2 dosyaları vardı.

Aynı adımları malzeme ikonları için de uyguladım.

Şimdi geri dönün ve cdn'yi aradığınız satırı yorumlayın ve bunun yerine oluşturduğunuz yeni css dosyasını kullanın.

— Helzgate
kaynak
1

Bunu dene

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
— Baş Geliştirici
kaynak
1

CSS stil sayfanızda yazı tipi türü adından önce / fonts / veya / font / kullanın . Bu hatayla karşılaştım ama bundan sonra iyi çalışıyor.

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
— Muhammed Javed
kaynak
1

Web sitesi için 'Roboto' yazı tipini aşağıdaki gibi kullanabilirsiniz:

Ayrı bir css dosyası oluşturduysanız, css dosyasının üst kısmına aşağıdaki satırı ekleyin:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

Veya ayrı bir dosya oluşturmak istemiyorsanız aralarına yukarıdaki satırı ekleyin <style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

sonra:

html, body {
    font-family: 'Roboto', sans-serif;
}
— Bay Hiç kimse
kaynak
0

Bu zip dosyasındaki How_To_Use_Webfonts.html dosyasını okudunuz mu?

Bunu okuduktan sonra, her yazı tipi alt klasöründe, bunu ekleyerek kullanabileceğiniz önceden oluşturulmuş bir .css var gibi görünüyor:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
— Barry Colebank Jr
kaynak
0

bu kolay

indirdiğiniz her klasörde farklı türde bir roboto yazı tipi vardır, bunlar farklı yazı tipleri demektir

örnek: "roboto_regular_macroman"

bunlardan herhangi birini kullanmak için:

1- Kullanmak istediğiniz yazı tipinin klasörünü çıkartın

2- css dosyasının yakınına yükleyin

3- şimdi css dosyasına ekleyin

"roboto_regular_macroman" adlı yazı tipini eklemek için örnek:

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

dosyaların yolunu izle, burada css olduğu aynı klasöre "roboto_regular_macroman" adlı klasörü yükledim

artık yazı tipini yazarak font-family: 'Roboto';

— Omar Moustafa
kaynak
0

Aslında oldukça basit. Google'ın web sitesindeki yazı tipine gidin ve bağlantısını yazı tipini eklemek istediğiniz her sayfanın başına ekleyin.

0

Yazı tipi sorunlarını gidererek bir saat geçirdim.

İlgili cevap - Aşağıda React.jsweb sitesi için:

  1. Npm modülünü takın:

    npm install --save typeface-roboto-mono


  2. aşağıdakilerden birini kullanmak istediğiniz .js dosyasına aktarın :

    import "typeface-roboto-mono"; // içe aktarma destekleniyorsa
    require('typeface-roboto-mono') // içe aktarma desteklenmiyorsa

  3. Eleman için aşağıdakilerden birini kullanabilirsiniz
    :

    fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
    font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
    style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

Umarım yardımcı olur.

— Manohar Reddy Poreddy
kaynak
0

Css ile:

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* etc, etc. */

Sass ile:

  @font-face
    font-family: 'Roboto'
    src: local('Roboto'), local('Roboto-Regular'), url('../fonts/Roboto-Regular.ttf') format('truetype')
    font-weight: normal
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/Roboto-Bold.ttf') format('truetype')
    font-weight: bold
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto-Italic.ttf') format('truetype')
    font-weight: normal
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype')
    font-weight: bold
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto-Light.ttf') format('truetype')
    font-weight: 300
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../fonts/Roboto-LightItalic.ttf') format('truetype')
    font-weight: 300
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto-Medium.ttf') format('truetype')
    font-weight: 500
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype')
    font-weight: 500
    font-style: italic

/* Roboto-Regular.ttf       400 */
/* Roboto-Bold.ttf          700 */
/* Roboto-Italic.ttf        400 */
/* Roboto-BoldItalic.ttf    700 */
/* Roboto-Medium.ttf        500 */
/* Roboto-MediumItalic.ttf  500 */
/* Roboto-Light.ttf         300 */
/* Roboto-LightItalic.ttf   300 */

/* https://fonts.google.com/specimen/Roboto#standard-styles */
— intika
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.