I have seen a lot of people asking how to use CUFON with Arabic fonts and texts. This library is amazing indeed especially that it comes at an early stage when a lot of browsers did not know more than 7-10 generic fonts that people are bored with.
Arabic developers (or right to left developers) were not able to use this library because it does not support complex scripts. There is no intention for further development to cover this language as well as mentioned several times by the lead developer of CUFON.
What is the solution then for an arab developer or designer who would like to give a special touch for his websites? The solution is very easy and handy. @font-face !!! Some fancy examples are found on this page (http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/).
How to use it with Arabic text? The solution is very simple:
Example: http://www.gideas-demo.info/font-face/font-face.html
The html code for this example:
The css code for this example:
Arabic developers (or right to left developers) were not able to use this library because it does not support complex scripts. There is no intention for further development to cover this language as well as mentioned several times by the lead developer of CUFON.
What is the solution then for an arab developer or designer who would like to give a special touch for his websites? The solution is very easy and handy. @font-face !!! Some fancy examples are found on this page (http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/).
How to use it with Arabic text? The solution is very simple:
@font-face {
font-family:a-remote-font-name;
src: source url;
[font-weight:XXpx];
[font-style:regular html style];
}
The major task is to select a nice TTF (or even OTF) font that you like and link it to the new font-family that you define (Some fonts needs to be converted to EOT though)Example: http://www.gideas-demo.info/font-face/font-face.html
The html code for this example:
<html>
<head>
<title>كيفية استخدام font-face مع اللغة العربية على الانترنت</title>
<link href="./font-face.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="font-face-arabic-text-title">بسم الله الرحمن الرحيم</div>
الحمد لله الذي انعم على الإنسان بنعمة العقل والإبتكار وحب البحث والتعلم. كنا عالماً او متعلماً او محباً للعلم ولا تكن الرابعة فتهلك.
<br/><br/>
<div id="font-face-arabic-text-body">هذه تجربة بسيطة وتعريف بكيفية استخدام خاصية font-face مع النص العربي لإضفاء جمالية خاصة على الصفحات المصممة للانترنت باللغة العربية.</div>
</body>
</html>
The css code for this example:
@font-face {
font-family: "Gideas Font-face Demo";
font-weight: normal;
src: local("âک؛"), url("fonts/thickTitleFont.ttf") format("truetype");
}
#font-face-arabic-text-title
{
margin:auto;
width:400px;
font: 150% 'Gideas Font-face Demo','Simplified Arabic';
color:blue;
font-size:40px;
direction:rtl;
}
#font-face-arabic-text-body
{
margin:auto;
width:600px;
font: 120% 'Gideas Font-face Demo','Simplified Arabic';
color:red;
font-size:20px;
direction:rtl;
}
2 comments:
اعتقد يا استاذ بلال ان هناك بعض الخطوط لا تصلح مثل
Hacen saudi arabia
و يمكن تجربته
@Mohamed Mossad
طبعاً هناك خطوط لا تعمل ولكن المشكلة ليست في طريقة ربط الخط بقدر ما هي متعلقة بطريقة تصميم الخط.
Post a Comment