Untuk beberapa kali dalam blog ini pernah ditampilkan tulisan-tulisan arab yang cukup sulit ditulis dan ditampilkan, ya cukup sulit bagi saya menulis arab dengan keyboard dan menampilkan tulisan arab dengan baik dari segi keterbacaanya. Font arabic tidak semuanya didukung dan ada dimasing-masing komputer pembaca blog.
Tapi berkat CSS3 dan web-font, kita bisa lebih mempercantik tampilan aksara arab di website kita. Untuk font yang digunakan adalah font KFGQPC Uthman Taha Naskh yang bisa anda unduh dari sini, atau gunakan font arabic lain
Langkah-langkah yang bisa anda ikuti:
1. Unduh font KFGQPC Uthman Taha Naskh, dari sini atau cari versi terbaru.
2. Upload font ke direktori public_html atau htdocs, atau ke direktori lain yang terbaca via web. Misal, di https://emka.web.idfont/
3. Edit file CSS, tambahkan code berikut:
[sourcecode language=”css”]
div#content p.ArabLeft, div#content p.ArabCenter, div#content p.ArabRight {
background-image:url(/img/line2.gif);
font-size: 2em;
font-family: ‘KFGQPC Uthman Taha Naskh’, KFGQPC_Naskh, ‘traditional arabic’;
font-weight: normal;
line-height: 46px;
direction: rtl;
}
div#content p.ArabRight {
text-align: right;
}
div#content p.ArabCenter {
text-align: center;
}
div#content p.ArabLeft {
text-align: left;
}
[/sourcecode]
*Silakan sesuaikan CSS tersebut dengan kondisi tag pada template anda.
4. Tambahkan style webfont pada bagian header html anda:
[sourcecode language=”html”]
<style type="text/css">
@font-face {font-family: ‘KFGQPC_Naskh’; src: url(‘/font/KFC_naskh.eot’); src: local(‘KFGQPC Uthman Taha Naskh’), url(‘/font/KFC_naskh.otf’) format(‘opentype’);}
</style>
[/sourcecode]
5. Coba tulis aksara arab anda pada area dengan class ArabicCenter, ArabicLeft atau ArabicRight dan lihat pada browser.
Bisa khan? seperti contohnya:
