Sematkan font Ubuntu di halaman web apa pun

Jawaban:

25

Ada 2 metode yang dapat Anda gunakan untuk menanamkan font Ubuntu di situs web Anda - menggunakan Google Font Directory (lebih disukai) atau menggunakan @font-facedeklarasi CSS dan mengonversi font Anda secara manual.

Menggunakan Google Webfonts

Anda sekarang dapat menggunakan font Ubuntu sebagai font web Google. Ini akan membuat prosesnya jauh lebih sederhana. Sebagian besar isi dari bagian jawaban ini berasal dari jawaban sladen .

Mengapa menggunakan Google Font API metode yang disukai?

Menggunakan Google Font API adalah saran yang sangat baik karena memungkinkan webfonts untuk secara otomatis bekerja di semua browser modern tanpa harus khawatir tentang detailnya. Menggunakan font API berarti pengunjung akan selalu melihat versi terbaru dari jenis huruf secara otomatis.

Bagaimana saya bisa menggunakan Google Font API?

Sejak 21 Desember 2010 Keluarga Font Ubuntu sekarang termasuk dan dapat digunakan dari Google Font API, kunjungi:

Anda dapat membaca posting Google Web Font tentang berita, dan kemudian:

  1. Buka Direktori Google Font: " Ubuntu - Gunakan font ini "
  2. Centang kombinasi bobot dan gaya dari Biasa, Miring, Tebal, dan Tebal-Miring yang Anda butuhkan untuk halaman web Anda.

    teks alternatif

  3. Jika standarnya salah, pilih kombinasi bahasa / skrip yang Anda butuhkan: situs web Rusia dengan contoh bahasa Inggris mungkin menggunakan "Cyrillic, Latin".

    teks alternatif

  4. Tambahkan <link>tag yang diberikan <head> ... </head>di antara di halaman HTML Anda atau template dan tambahkan kode CSS yang sesuai di antara <style> ... </style>tag di Anda <head>.

    Misalnya, jika Anda membuat situs web hybrid Rusia / Inggris dan ingin menggunakan font sebagai default untuk semua teks, Anda bisa menambahkan kode berikut di antara <head>tag Anda :

    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
    <style type="text/css" >
        body {
            font-family : 'Ubuntu', sans-serif;
        }
    </style>
    

Catatan :

"Latin" adalah naskah tempat bahasa Inggris dan banyak bahasa Eropa dan Afrika lainnya ditulis.

"Berlangganan" mengoptimalkan file font dengan hanya mengirim karakter untuk bahasa tertentu, font masing-masing sekitar 44 kB. Angka 168 kB yang ditampilkan saat ini adalah untuk semua 1.200+ mesin terbang sebagai unduhan font web tunggal — dan sebagian besar tidak diperlukan untuk satu situs web.

File font Ubuntu secara otomatis dikonversi dalam format yang benar untuk berbagai browser; tergantung pada membuat dan versi format yang diperlukan adalah WOFF, EOT, SVGatau TTF. Kombinasi CSS yang tepat adalah spesifik untuk setiap permintaan halaman dan secara ajaib menyelesaikan masalah sulit ini.

Menggunakan @ font-face

Anda dapat menanamkan font Ubuntu dengan mengonversinya menjadi font WOFF . Anda kemudian dapat menanamkannya menggunakan deklarasi CSS-font-face @. Font (file .ttf) dapat ditemukan di /usr/share/fonts/truetype/ubuntu-font-family.

Misalnya, untuk menggunakan font Regular Ubuntu, dikonversi ke file WOFF, Ubuntu-R.woff, gunakan kode CSS ini:

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

Demikian pula untuk Ubuntu Bold:

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

Ubuntu Italic:

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

Ubuntu Bold Italic:

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

Ini didukung oleh semua browser terbaru .

Pertimbangan

Harap diingat bahwa beberapa pengguna mengatur browser mereka untuk menggunakan serangkaian font tertentu dan mungkin terganggu jika font khusus digunakan. Juga, baca Lisensi Font Ubuntu untuk ketentuan yang tepat tentang bagaimana font dapat didistribusikan.

dv3500ea
sumber
@ DKuntz2 - itu memang lebih baik; Saya sekarang telah mengubah jawaban saya.
dv3500ea
Tidak mengerti perlunya menyalin jawaban sladen. Mengapa tidak mengedit saja?
papukaija
Saya menjawab pertanyaan ini jauh sebelum sladen, menguraikan metode @ font-face. Ini sebelum font ditambahkan ke Google Font API (yang merupakan metode yang lebih baik). Saya hanya menambahkan catatan singkat di awal jawaban saya dan sladen menjawab jauh lebih komprehensif dan memiliki jawaban yang lebih baik untuk menggunakan metode google.
dv3500ea
1
Namun, pada saat ini jawaban saya diterima dan sangat terangkat dan hasilnya adalah orang mungkin berpikir mereka harus menggunakan metode @ font-face yang kurang disukai. Sladen menghubungi saya melalui email tentang ini dan saya setuju untuk mengubah jawaban saya, memberikan atribusi yang diperlukan oleh lisensi creative commons dari situs ini.
dv3500ea
10

Menggunakan Google Font API adalah saran yang sangat baik karena memungkinkan webfonts untuk secara otomatis bekerja di semua browser modern tanpa harus khawatir tentang detailnya. Menggunakan font API berarti pengunjung akan selalu melihat versi terbaru dari jenis huruf secara otomatis.

Sejak 21 Desember 2010 Keluarga Font Ubuntu sekarang termasuk dan dapat digunakan dari Google Font API, kunjungi:

Kamu bisa membaca posting Google Web Font tentang berita, dan kemudian:

  1. Buka Direktori Google Font: "Ubuntu - Gunakan font ini "
  2. Centang kombinasi bobot dan gaya dari Biasa, Miring, Tebal, dan Tebal-Miring yang Anda butuhkan untuk halaman web Anda.
  3. Jika standarnya salah, pilih kombinasi bahasa / skrip yang Anda butuhkan: situs web Rusia dengan contoh bahasa Inggris mungkin menggunakan "Cyrillic, Latin".
  4. Salin dan tempel kedua baris CSS ke dalam<head> ... </head> dan di <style>...</style>bagian halaman atau templat HTML Anda.

Catatan:

"Latin" adalah naskah tempat bahasa Inggris dan banyak bahasa Eropa dan Afrika lainnya ditulis.

"Berlangganan" mengoptimalkan file font dengan hanya mengirim karakter untuk bahasa tertentu, font masing-masing sekitar 44 kB. Angka 168 kB yang ditampilkan saat ini adalah untuk semua 1.200+ mesin terbang sebagai unduhan font web tunggal — dan sebagian besar tidak diperlukan untuk satu situs web.

File font Ubuntu secara otomatis dikonversi dalam format yang benar untuk berbagai browser; tergantung pada membuat dan versi format yang diperlukan adalah WOFF, EOT, SVGatau TTF. Kombinasi CSS yang tepat adalah spesifik untuk setiap permintaan halaman dan secara ajaib menyelesaikan masalah sulit ini.

dibebani
sumber
8

Render font sisi server (mungkin lebih baik "rendering font dinamis") telah menjadi masalah yang menarik untuk waktu yang cukup lama.

Secara teknis, tampaknya logis bahwa agar mesin dapat menampilkan font tertentu, itu harus sudah diinstal secara lokal.

Di sisi lain, desain web kehilangan banyak karena harus tetap berpegang pada 'font web' dasar / terkenal.

CSS2.1 telah membuat beberapa peningkatan dengan menggunakan deklarasi aturan font-face @ .
Itu belum menjadi standar, tetapi pada akhirnya akan dengan CSS3.

Selain itu, ada beberapa metode alternatif, seperti:

Saya harap tautan yang disediakan akan memberi Anda ide yang lebih baik tentang apa yang bisa dilakukan ;-)

Pavlos G.
sumber