Latest Article

Promotion Ads

Buat Website Murah

Featured Article

Popular Article

Belajar Mengenal LESS CSS Preprocessor

Artikel ini adalah Dokumentasi LESS yang diambil dari Website Resminya, Lalu diterjemahkan ke dalam Bahasa Indonesia oleh Alex Xandra dalam websitenya “Dokumentasi LESS (Bahasa Indonesia)”. Apa itu LESS ? LESS merupakan ekstensi dari CSS, yang menambahkan perilaku dinamis seperti variabel, mixin, operasi, & fungsi. LESS dapat dijalankan pada sisi klien (Chrome, Safari, Firefox) maupun server (menggunakan Node.js dan Rhino).

Pengunaan LESS

Pengunaan pada sisi klien merupakan cara yang paling mudah untuk mulai menggunakan dan mengembangkan LESS. Untuk lingkungan produksi, dan terutama jika performa sangat penting, direkomentasikan untuk melakukan kompilasi LESS ke CSS menggunakan node atau perangkat lainnya.

Hubungkan stylesheet .less dengan rel, yang memiliki nilai “stylesheet/less“:

    <link rel="stylesheet/less" type="text/css" href="styles.less">

Lalu unduh less.js dari sini, dan masukkan dalam elemen <head> pada halaman utama, seperti berikut :

    <script src="less.js" type="text/javascript"></script>

Pastikan stylesheet .less dimasukkan sebelum elemen script di atas.

Watch mode

Watch mode merupakan fitur sisi klien yang memungkinkan kita untuk melakukan refresh stylesheet secara otomatis ketika ada perubahan pada stylesheet tersebut. Untuk mengaktifkan fitur ini, tambahkan ‘#!watch’ pada URL browser, lalu lakukan refresh halaman. Fitur ini juga dapat diaktifkan dengan menjalankan less.watch() pada konsol.

Cara paling mudah untuk melakukan instalasi LESS pada server adalah melalui npm, package manager dari node. Instalasi dapat dilakukan dengan kode berikut :

    $ npm install -g less

Pengunaan dengan Command-Line

Setelah selesai diinstalasi, kita dapat menjalankan compiler melalui command-line, seperti berikut :

    $ lessc styles.less

Kode di atas akan menghasilkan kode CSS yang telah dikompilasi pada stdout, yang kemudian dapat dipindahkan ke file yang diinginkan, seperti berikut :

    $ lessc styles.less > styles.css

Untuk menghasilkan CSS yang telah dikompresi, gunakan opsi -x. Jika ingin mengatur aspek-aspek kompresi, YUI CSS Compressor dapat digunakan melalui opsi –yui-compress. Untuk melihat semua opsi command line yang ada, jalankan lessc tanpa parameter.

Pengunaan dalam Kode

Compiler LESS dapat dipanggil dari node, seperti berikut :

    var less = require('less');
    less.render('.class { width: (1 + 1) }', function (e, css) {
    console.log(css);
    });

yang akan menghasilkan :

    .class {
    width: 2;
    }

Kita juga dapat menggunakan parser dan compiler secara manual :

    var parser = new(less.Parser);
    parser.parse('.class { width: (1 + 1) }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
    });

Konfigurasi

Kita dapat mengirimkan opsi ke dalam compiler :

    var parser = new(less.Parser)({
    paths: ['.', './lib'], // Mendefinisikan path pencarian untuk @import
    filename: 'style.less' // Mendefinisikan nama file, untuk pesan kesalahan yang lebih baik
    });
    parser.parse('.class { width: (1 + 1) }', function (e, tree) {
    tree.toCSS({ compress: true }); // Kompres CSS keluaran
    });

Sebagai ekstensi dari CSS, LESS tidak hanya kompatibel dengan CSS, tetapi fitur-fitur tambahan dari LESS juga menggunakan sintaks CSS yang ada sekarang. Hal ini menyebabkan mempelajari LESS sangat mudah, dan jika terdapat keragu-raguan mengenai fitur LESS, kita dapat kembali menggunakan CSS.

Variabel

Variabel memungkinkan kita untuk mendefinisikan nilai-nilai yang banyak digunakan pada satu tempat, kemudian menggunakannya pada bagian lain dalam stylesheet, menjadikan pengubahan nilai pada semua bagian kode menjadi semudah penggantian satu baris kode.

    @nice-blue: #5B83AD;
    @light-blue: (@nice-blue + #111);
    #header { color: @light-blue; }

Maka akan menghasilkan :

    #header { color: #6c94be; }

Mendefinisikan variabel dengan nama variabel lainnya juga memungkinkan:

    @imam: "I am Imam.";
    @var: 'imam';
    content: @@var;

Maka akan menghasilkan :

    content: "I am fnord.";

Perlu diperhatikan bahwa variabel dalam LESS adalah ‘konstanta’, yang berarti variabel hanya dapat didefinisikan satu kali.

Mixins (Pencampuran)

LESS memungkinkan kita untuk menambahkan sekumpulan property dari sebuah ruleset ke ruleset lainnya. Misalkan jika terdapat class berikut :

    .bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }

Jika kita ingin menggunakan property tersebut di dalam ruleset lainnya, kita dapat langsung memasukkan nama class tersebut ke dalam ruleset yang ingin menggunakan properti tersebut, seperti :

    #menu a {
    color: #111;
    .bordered;
    }
    .post a {
    color: red;
    .bordered;
    }

Property dari class .bordered akan muncul dalam #menu a & .post a :

    #menu a {
    color: #111;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }
    .post a {
    color: red;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }

Semua ruleset dari class atau id dapat dicampurkan dengan cara seperti ini.

Parametric Mixins (Pencampuran Berparameter)

LESS memiliki tipe khusus dari ruleset yang dapat dicampurkan ke dalam class, yaitu ruleset yang dapat menerima parameter. Berikut adalah contoh utamanya :

    .border-radius (@radius) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    }

Berikut adalah cara penggabungan kode di atas ke dalam berbagai ruleset lainnya :

    #header {
    .border-radius(4px);
    }
    .button {
    .border-radius(6px);
    }

Parametric mixins juga dapat memiliki nilai standar untuk parameter :

    .border-radius (@radius: 5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    }

Sehingga kode di atas dapat dipanggil dengan cara berikut :

    #header {
    .border-radius;
    }

Yang akan menghasilkan border-radius berukuran 5px. Kita juga dapat menggunakan parametric mixin yang tidak memiliki parameter. Fitur ini berguna jika kita ingin menyembunyikan ruleset dari keluaran CSS, tetapi ingin menggunakan property pada ruleset lainnya. Kode berikut :

    .wrap () {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
    }
    pre { .wrap }

Maka akan menghasilkan :

    pre {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
    }

Variabel @arguments

@arguments memiliki arti khusus di dalam mixin, di mana @arguments akan mengandung seluruh argumen yang diberikan ketika mixin dipanggil. Hal ini berguna jika kita tidak ingin menyebutkan nilai parameter satu demi satu.

    .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
    box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    }
    .box-shadow(2px, 5px);

Maka akan menghasilkan :

    box-shadow: 2px 5px 1px #000;
    -moz-box-shadow: 2px 5px 1px #000;
    -webkit-box-shadow: 2px 5px 1px #000;

Pattern-matching and Guard expressions

Terkadang kita ingin mengganti perilaku dari mixin, sesuai dengan parameter yang dikirimkan ke mixin tersebut. Mulai dari hal yang sederhana seperti berikut :

    .mixin (@s, @color) { ... }
    .class {
    .mixin(@switch, #888);
    }

Di mana kita ingin .mixin memiliki perilaku yang berbeda, sesuai dengan nilai dari @switch. Hal ini dapat dicapai dengan mendefinisikan .mixin seperti berikut :

    .mixin (dark, @color) {
    color: darken(@color, 10%);
    }
    .mixin (light, @color) {
    color: lighten(@color, 10%);
    }
    .mixin (@_, @color) {
    display: block;
    }

Sekarang, jika kita jalankan :

    @switch: light;
    .class {
    .mixin(@switch, #888);
    }

Maka kita akan mendapatkan CSS berikut :

    .class {
    color: #a2a2a2;
    display: block;
    }

Dan ketika warna lain dikirimkan ke .mixin maka warna tersebut akan menjadi lebih terang. Jika nilai dari @switch adalah dark maka kita akan mendapatkan warna yang lebih gelap. Yang terjadi adalah sebagai berikut:

Definisi mixin yang pertama tidak cocok, karena definisi ini mengharapkan nilai dark sebagai argumen pertama.
Definisi mixin yang kedua cocok, karena definisi ini mengharapkan light.
Definisi mixin yang ketiga cocok, karena definisi ini mengharapkan nilai apapun.
The third mixin definition matched because it expected any value.

Hanya definisi mixin yang cocok dengan parameter yang digunakan. Variabel dapat dicocokkan dan diikatkan dengan nilai apapun. Segala hal selain variabel hanya dapat dicocokkan dengan nilai yang sama dengan dirinya. Pencocokan juga dapat dilakukan berdasarkan jumlah argumen. Misalnya :

    .mixin (@a) {
    color: @a;
    }
    .mixin (@a, @b) {
    color: fade(@a, @b);
    }

Sekarang jika .mixin dipanggil dengan satu argumen, maka kita akan mendapatkan hasil dari definisi pertama. Jika .mixin dipanggil dengan dua argumen, maka kita akan mendapatkan definisi yang kedua, di mana @a memudar menjadi @b.

Guards (Penjaga)

Guard berguna ketika kita ingin mencocokkan ekspresi, bukan nilai atau jumlah argumen. Jika anda akrab dengan pemrograman fungsional maka anda pasti sudah pernah menggunakan fitur ini. Untuk tetap dekat dengan sifat deklaratif CSS, LESS mengimplementasikan fitur kondisional dengan guard mixin alih-alih pernyataan if/else. Fitur ini sejenis dengan spesifikasi @media query dari CSS3. Mari mulai dengan contoh:

    .mixin (@a) when (lightness(@a) >= 50%) {
    background-color: black;
    }
    .mixin (@a) when (lightness(@a) < 50%) {
    background-color: white;
    }
    .mixin (@a) {
    color: @a;
    }

Kuncinya adalah pada keyword when, yang memberikan rentetan guard (pada contoh hanya satu guard). Jika kode berikut dijalankan :

    .class1 { .mixin(#ddd) }
    .class2 { .mixin(#555) }

Maka kita akan mendapatkan :

    .class1 {
    background-color: black;
    color: #ddd;
    }
    .class2 {
    background-color: white;
    color: #555;
    }

Daftar dari operator perbandingan yang dapat digunakan dalam guard adalah : *> >= = =< <*. Selain itu, *keyword true menjadikan sebuah parameter selalu benar, sehingga kedua *mixin berikut adalah sama :

    .truth (@a) when (@a) { ... }
    .truth (@a) when (@a = true) { ... }

Dan semua nilai selain true menjadi salah :

    .class {
    .truth(40); // Tidak akan cocok dengan kedua definisi di atas.
    }

Guard dapat dipisahkan dengan koma ‘,’ jika salah satu guard bernilai benar, maka semuanya akan dianggap benar. Misalnya kode berikut :

    .mixin (@a) when (@a > 10), (@a < -10) { ... }

Perlu diperhatikan bahwa kita dapat juga membandingkan satu argumen dengan argumen lainnya, ataupun dengan yang bukan argumen, seperti berikut :

    @media: mobile;
    .mixin (@a) when (@media = mobile) { ... }
    .mixin (@a) when (@media = desktop) { ... }
    .max (@a, @b) when (@a > @b) { width: @a }
    .max (@a, @b) when (@a < @b) { width: @b }

Dan terakhir, jika kita ingin mencocokkan mixin berdasarkan tipe data dari sebuah nilai, maka kita dapat menggunakan fungsi *is** seperti berikut :

    .mixin (@a, @b: 0) when (isnumber(@b)) { ... }
    .mixin (@a, @b: black) when (iscolor(@b)) { ... }

Berikut adalah fungsi-fungsi dasar untuk pengecekan tipe data :

    iscolor
    isnumber
    isstring
    iskeyword
    isurl

Jika ingin melakukan pengecekan apakan sebuah nilai adalah bilangan dan memiliki satuan yang spesifik, maka fungsi-fungsi berikut dapat digunakan :

    ispixel
    ispercentage
    isem

Kita juga dapat menggunakan keyword and untuk memberikan kondisi tambahan di dalam guard :

    .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

Dan juga keyword not untuk memberikan negasi dari kondisi :

    .mixin (@b) when not (@b > 0) { ... }

Nested rules (Aturan Bersarang)

LESS memungkinkan kita untuk menggunakan nesting alih-alih, atau bersamaan dengan cascading. Misalkan kode CSS berikut :

    #header { color: black; }
    #header .navigation {
    font-size: 12px;
    }
    #header .logo {
    width: 300px;
    }
    #header .logo:hover {
    text-decoration: none;
    }

Dapat dituliskan dalam LESS seperti ini :

    #header {
    color: black;
    .navigation {
    font-size: 12px;
    }
    .logo {
    width: 300px;
    &:hover { text-decoration: none }
    }
    }

Atau

    #header { color: black;
    .navigation { font-size: 12px }
    .logo { width: 300px;
    &:hover { text-decoration: none }
    }
    }

Di mana kode LESS yang dihasilkan lebih singkat, dan sesuai dengan struktur DOM tree kita. Perhatikan kombinator & yang digunakan ketika kita ingin selector bersarang disatukan dengan selector induknya, bukan sebagai turunan. Hal ini penting untuk pseudo-class seperti :hover & :focus. Misalnya :

    .bordered {
    &.float {
    float: left;
    }
    .top {
    margin: 5px;
    }
    }

Akan menghasilkan :

    .bordered.float {
    float: left;
    }
    .bordered .top {
    margin: 5px;
    }

Pengunaan Lanjutan dari &

Simbol & juga dapat digunakan pada selector untuk membalikkan urutan penyarangan dan untuk menyilangkan class. Contohnya :

    .child, .sibling {
    .parent & {
    color: black;
    }
    & + & {
    color: red;
    }
    }

Akan menghasilkan :

    .parent .child,
    .parent .sibling {
    color: black;
    }
    .child + .child,
    .child + .sibling,
    .sibling + .child,
    .sibling + .sibling {
    color: red;
    }

& juga dapat digunakan dalam mixin untuk merujuk ke penyarangan yang ada di luar mixin.

Operasi

Seluruh angka, warna, atau variabel dapat dioperasikan. Operasi dilakukan di dalam kurung. Berikut adalah beberapa contoh operasi yang dapat dilakukan :

    @base: 5%;
    @filler: (@base * 2);
    @other: (@base + @filler);
    color: (#888 / 4);
    background-color: (@base-color + #111);
    height: (100% / 2 + @filler);

Keluarannya adalah sesuai dengan ekspektasi kita. LESS mengerti perbedaan antara warna & unit. Jika unit digunakan dalam operasi, seperti :

    @var: (1px + 5);

LESS akan menggunakan unit tersebut sebagai keluaran 6px dalam contoh ini. Kurung tambahan juga diperbolehkan dalam operasi :

    width: ((@var + 5) * 2);

Fungsi Warna

LESS menyediakan beberapa fungsi yang melakukan transformasi warna. Warna terlebih dahulu diubah ke dalam ruang HSL, dan kemudian dimanipulasi pada level channel :

    lighten(@color, 10%); // mengembalikan warna 10 persen lebih *terang* daripada @color
    darken(@color, 10%); // mengembalikan warna 10 persen lebih *gelap* daripada @color
    saturate(@color, 10%); // mengembalikan warna 10 persen *lebih* jenuh dibandingkan @color
    desaturate(@color, 10%); // mengembalikan warna 10 persen *kurang* jenuh dibandingkan @color
    fadein(@color, 10%);
    // mengembalikan warna 10 persen *kurang* transparan dibandingkan @color
    fadeout(@color, 10%);
    // mengembalikan warna 10 persen *lebih* transparan dibandingkan @color
    fade(@color, 50%); // mengembalikan @color dengan 50% transparansi
    spin(@color, 10); // mengembalikan warna 10 derajat lebih besar dalam hue dari @color
    spin(@color, -10); // mengembalikan warna 10 derajat lebih kecil dalam hue dari @color
    mix(@color1, @color2, @weight);
    // mengembalikan campuran warna dari @color1 dan @color2, dengan beban (weight) standar 50%
    contrast(@color1, @darkcolor, @lightcolor);
    // mengembalikan @darkcolor jika @color1 memiliki >50% luma (misal: warna terang),
    // jika tidak mengembalikan @lightcolor

Pengunaan fungsi-fungsi di atas cukup mudah :

    @base: #f04615;
    .class {
    color: saturate(@base, 5%);
    background-color: spin(lighten(@base, 25%), 8);
    }

Kita juga dapat mengambil informasi warna :

    hue(@color); // mengembalikan *channel* `hue` dari @color
    saturation(@color); // mengembalikan *channel* `saturation` dari @color
    lightness(@color); // mengembalikan *channel* `lightness` dari @color
    red(@color); // mengembalikan *channel* `red` dari @color
    green(@color); // mengembalikan *channel* `green` dari @color
    blue(@color); // mengembalikan *channel* `blue` dari @color
    alpha(@color); // mengembalikan *channel* `alpha` dari @color
    luma(@color); // mengembalikan nilai `luma` (persepsi kecerahan) dari @color

Fungsi-fungsi ini berguna ketika kita ingin membuat warna baru berdasarkan channel warna lainnya, misalnya :

    @new: hsl(hue(@old), 45%, 90%);

@new akan memiliki nilai hue dari @old, dan nilai jenuh dan cerahnya sendiri. Warna-warna yang ada akan selalu dikembalikan sebagai nilai RGB, sehingga menggunakan spin ke nilai abu-abu tidak akan mengembalikan apa-apa.

Fungsi Matematis

LESS menyediakan beberapa fungsi matematis yang dapat digunakan untuk nilai bilangan :

    round(1.67); // mengembalikan `2`
    ceil(2.4); // mengembalikan `3`
    floor(2.6); // mengembalikan `2`

Jika kita ingin mengubah sebuah nilai menjadi persentase, fungsi percentage dapat digunakan :

    percentage(0.5); // returns `50%`

Namespaces

Terkadang kita ingin mengelompokkan variabel atau mixin, untuk merapikan kode, atau hanya untuk enkapsulasi. Hal ini dapat dilakukan dengan cukup intuitif dalam LESS. Misalkan jika kita ingin menggabungkan beberapa mixin dan variabel dalam #bundle, untuk kemudian digunakan, dapat dilakukan seperti berikut :

    #bundle {
    .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
    }
    .tab { ... }
    .citation { ... }
    }

Sekarang jika kita ingin melakukan mixin terhadap .button di dalam #header a, kita dapat melakukan :

    #header a {
    color: orange;
    #bundle > .button;
    }

Scope (Jangkauan)

Scope dalam LESS sangat mirip dengan yang biasa ada dalam bahasa pemrograman. Variabel & mixin terlebih dahulu dicari pada scope lokal, dan jika tidak ditemukan maka compiler akan mencari ke scope induk, dan seterusnya.

    @var: red;
    #page {
    @var: white;
    #header {
    color: @var; // white
    }
    }
    #footer {
    color: @var; // red
    }

Komentar

Komentar model CSS tetap digunakan oleh LESS :

    /* Halo, ini komentar model CSS. */
    .class { color: black }

Komentar satu baris juga dapat digunakan di LESS, tetapi komentar ini bersifat ‘silent’, tidak nampak pada CSS hasil kompilasi.

    // Halo, saya adalah komentar 'silent'. Saya tidak nampak dalam hasil kompilasi CSS.
    .class { color: white }

Importing

Kita dapat melakukan impor file .less & seluruh variabel serta mixin yang ada di dalam menjadi dapat diakses pada file utama. Ekstensi .less bersifat opsional, sehingga kedua kode berikut adalah valid :

    @import "lib.less";
    @import "lib";

Jika kita ingin melakukan impor terhadap file CSS, tanpa file tersebut diproses oleh LESS, gunakan ekstensi .css seperti berikut :

    @import "lib.css";

File lib.css tidak akan diubah & masuk ke dalam keluaran CSS.

String interpolation

Variabel dapat ditanamkan ke dalam string, dengan cara yang sama pada ruby atau PHP, menggunakan konstruk @{name}

    @base-url: "http://assets.fnord.com";
    background-image: url("@{base-url}/images/bg.png");

Escaping

Terkadang kita ingin mengeluarkan nilai CSS yang bukan sintaks valid CSS atau menggunakan sintaks proprietary yang tidak dimengerti oleh LESS. Untuk mengeluarkan nilai-nilai tersebut, kita dapat memasukkannya ke dalam sebuah string yang diawali dengan ~ misalnya :

    .class {
    filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
    }

Kode seperti ini disebut “escaped value”, yang menghasilkan :

    .class {
    filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
    }

Selector Interpolation

Pengunaan variabel LESS di dalam selector dapat dilakukan dengan merujuk ke variabel tersebut dengan @{selector}, seperti pada string interpolation. Misalnya :

    @name: blocked;
    .@{name} {
    color: black;
    }

Maka akan menghasilkan

    .blocked {
    color: black;
    }

Sebelum LESS versi 1.3.1a, tipe selector (~"@{name}") dapat digunakan. Dukungan terhadap fitur ini akan dibuang kedepannya.

JavaScript evaluation

Ekspresi Javascript dapat dievaluasi sebagai nilai di dalam file .less. Fitur ini disarankan untuk digunakan dengan hati-hati karena kode LESS yang dihasilkan bisa saja tidak kompatibel dengan port dan sulit di-maintain. Jika mungkin, pikirkan fungsi yang dapat digunakan untuk mencapai hasil yang sama dan berikan saran pada github. Tim pengembang memiliki rencana untuk menambahkan fungsi-fungsi dasar. Tetapi jika anda tetap ingin menggunakan Javascript pada LESS, anda dapat membungkus ekspresi tersebut dalam back-tick seperti berikut :

    @var: `"hello".toUpperCase() + '!'`;

Maka akan menghasilkan :

    @var: "HELLO!";

Perhatikan bahwa anda mungkin harus menggunakan interpolation & escaping ketika menggunakan string :

    @str: "hello";
    @var: ~`"@{str}".toUpperCase() + '!'`;

Maka akan menjadi :

    @var: HELLO!;

Akses penuh ke lingkungan Javascript juga memungkinkan :

    @height: `document.body.clientHeight`;

Jika ingin membaca string Javascript sebagai warna heksa, gunakan fungsi color :

    @color: color(`window.colors.baseColor`);
    @darkcolor: darken(@color, 10%);

Tulisan ini merupakan terjemahan dari website resmi LESS yang diterjemahkan oleh Alex Xandra Albert Sim dalam Dokumentasi Less Bahasa Indonesia untuk mempermudah pengguna berbahasa Indonesia yang ingin menggunakan LESS.

Created By :        Date : 29 - October - 2013

Jasa Pembuatan Website

4 Comments

  1. Intan SudibjoReply

    kayanya untuk memahami koding-koding seperti ini harus punya waktu luang sendiri, dan harus kerja keras dan perlu waktu untuk memahaminya hoho berat banget :D

    • Nurul ImamReply

      Iya harus giat belajar & praktek. Harus banyak punya waktu luang :)

  2. AgriReply

    Wow lengkap banget mas,
    saya jadi teringat degn kode yg sprti ini: $ lessc styles.less
    Klaau gk salah saya sering mnjumpainya di blog bawaan blogger.
    Oya mas, penggunaan @font-face itu kenapa gk di masukkan ya pada artikel ini?

    • Nurul ImamReply

      Lumayan cukup lengkap dokumentasi dari website resminya. Untuk pembahasan penggunaan @font-face mungkin akan disampaikan di artikel selanjutnya :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>