Menggunakan font khusus menggunakan CSS?


175

Saya telah melihat beberapa situs web baru yang menggunakan font khusus di situs mereka (selain Arial, Tahoma, dll.) Biasa.

Dan mereka mendukung jumlah browser yang bagus.

Bagaimana seseorang melakukan itu? Sementara juga mencegah orang dari memiliki akses gratis untuk mengunduh font, jika memungkinkan.


penggantian javascript seperticufon
tq

Jawaban:


365

Secara umum, Anda dapat menggunakan font khusus @font-facedalam CSS Anda. Berikut ini contoh yang sangat mendasar:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Kemudian, sepele, untuk menggunakan font pada elemen tertentu:

.classname {
    font-family: 'YourFontName';
}

( .classnameadalah pemilih Anda).

Perhatikan bahwa format font tertentu tidak berfungsi pada semua browser; Anda dapat menggunakan generator fontsquirrel.com untuk menghindari terlalu banyak upaya konversi.

Anda dapat menemukan serangkaian font web gratis yang disediakan oleh Google Fonts (juga memiliki @font-faceaturan CSS yang dibuat secara otomatis , jadi Anda tidak perlu menulis sendiri).

sementara juga mencegah orang dari memiliki akses gratis untuk mengunduh font, jika memungkinkan

Tidak, itu tidak mungkin untuk menata teks Anda dengan font khusus yang disematkan melalui CSS, sambil mencegah orang dari mengunduhnya. Anda perlu menggunakan gambar, Flash, atau Kanvas HTML5 , yang semuanya tidak terlalu praktis.

Saya harap itu membantu!


Terima kasih atas jawaban terincinya. Bolehkah saya bertanya apakah pendekatan semacam itu juga berfungsi untuk browser lama? Seperti .. IE8 / 7/6? Omong-omong, apakah semua font ditampilkan di Google Webfonts gratis untuk penggunaan komersial?
Radicate

1
@ Don @font-facebekerja dengan semua browser yang cukup baru, tetapi Anda harus memiliki format yang tepat; itu sebabnya saya merekomendasikan menggunakan fontsquirrel.com untuk mengotomatiskan proses konversi dan pembuatan aturan. Dan ya, Google Webfonts gratis untuk penggunaan komersial ( tautan kecil untuk info lebih lanjut ).
Chris

@ Chris, Apakah menghilangkan font-style:dan font-weight:dalam @font-facedeklarasi Anda melanggar standar?
Pacerier

1
Agar ini berfungsi, saya harus menambahkan format('truetype')antara URL sumber dan ;.
CalculatorFeline

Halo, Chris. Apakah Anda tahu cara menggunakan font ini? fontsmarket.com/font-download/gothic-821-condensed-bt
Billal Begueradj

30

Untuk memastikan font Anda kompatibel lintas-browser, pastikan Anda menggunakan sintaks ini:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Diambil dari sini .


25

Anda harus mengunduh file font dan memuatnya dalam CSS Anda.

Fe Saya menggunakan font Yanone Kaffeesatz di Aplikasi Web saya.

Saya memuat dan menggunakannya via

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

di stylesheet saya.


8

Hari ini ada empat format wadah font yang digunakan di web: EOT, TTF, WOFF,danWOFF2.

Sayangnya, terlepas dari berbagai pilihan, tidak ada satu format universal yang berfungsi di semua browser lama dan baru:

  • EOT hanya untuk IE,
  • TTF memiliki dukungan IE parsial,
  • WOFF menikmati dukungan terluas tetapi tidak tersedia di beberapa browser lama
  • Dukungan WOFF 2.0 sedang dalam proses untuk banyak browser.

Jika Anda ingin aplikasi web Anda memiliki font yang sama di semua browser maka Anda mungkin ingin memberikan semua 4 jenis font dalam CSS

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

Hai Hitesh. Bolehkah saya bertanya apa gunanya #iefix? dan bagian ini font-family: 'besom'; !important, di !importantluar ;?
Jonjie

4

Jika Anda tidak menemukan font apa pun yang Anda suka dari Google.com/webfonts atau fontsquirrel.com, Anda selalu dapat membuat font web sendiri dengan font yang Anda buat.

ini tutorial yang bagus: Buat kit wajah web font font Anda sendiri

Meskipun saya tidak yakin tentang mencegah seseorang mengunduh font Anda.

Semoga ini membantu,


4

ada juga alat menarik yang disebut CUFON . Ada demonstrasi cara menggunakannya di blog ini. Sangat sederhana dan menarik. Juga, itu tidak memungkinkan orang untuk ctrl + c / ctrl + v konten yang dihasilkan.


1

Saya sedang mengerjakan Win 8, gunakan kode ini. Ini berfungsi untuk IE dan FF, Opera, dll. Apa yang saya pahami adalah: font woff ringan dan umum pada font Google.

Buka di sini untuk mengkonversi font ttf Anda ke woff sebelumnya.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

0

Pertama-tama, Anda tidak dapat mencegah orang mengunduh font kecuali jika itu milik Anda dan itu biasanya memakan waktu berbulan-bulan. Dan tidak masuk akal untuk mencegah orang menggunakan font. Banyak font yang Anda lihat di situs web dapat ditemukan di platform gratis seperti yang saya sebutkan di bawah ini.

Tetapi jika Anda ingin menerapkan font ke situs web Anda baca ini: Ada cara yang cukup sederhana dan gratis untuk mengimplementasikan font ke situs web Anda. Saya akan merekomendasikan font Google karena gratis dan mudah digunakan. Misalnya, saya akan menggunakan font Bangers dari Google. ( Https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) Begini tampilannya: HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.