كيفية الطلب

1 تسجيل الدخول أو إنشاء حساب جديد.
2 راجع طلبك أو اطلب خدمة جديدة.
3 تأكيد الدفع

إذا كنت لا تزال تواجه مشكلات ، فالرجاء إخبارنا بذلك عن طريق إرسال بريد إلكتروني إلى support@natchcenter.com . شكراً لك!

ساعات العمل

الإثنين-للجمعة 9:00AM - 20:00PM
السبت - 9:00AM-17:00PM
أيام الأحد عن طريق موعد مسبق فقط!

اساليب الفونت فيس

من قبل NatchCenter / ماي 19, 2018 / نشرت في التصميم
اساليب الفونت فيس

Ethan – موقع Font Squirrel

لذا أتى شخص يدعى Ethan – وهو وراء موقع  Font Squirrel – واقترح حلاً فعالاً، وهو وضع نوع الخط بعد مساره، وترتيب الخطوط بطريقة فعالة حتى لا يحمل أيّ متصفح الخط مرتين حقاً

 

1

2

3

4

5

src: url('../fonts/droidnaskh-regular.eot');

src: url('../fonts/droidnaskh-regular.eot?#iefix') format('embedded-opentype'),

url('../fonts/droidnaskh-regular.woff') format('woff'),

url('../fonts/droidnaskh-regular.ttf') format('truetype'),

url('../fonts/droidnaskh-regular.svg#droid_arabic_naskhregular') format('svg');

 

 

كيف سيقرأها المتصفح ؟ لنرى السيناريو التالي عندما نفتح الموقع على متصفح الـ Firefox:-

متصفح فايرفوكس سيبدأ من أول سطر سيقرأه ويقول: “أنا لا أدعم ’embedded-opentype’

ثم ينتقل للسطر التالي، ويقول: “حسنا أنا أدعم woff لذا سأستخدمه” ثم يتوقف هناك، بمعنى أنّه لن يحمل بقية الخطوط، والأمر سيان لكل متصفح، مع ملاحظة أن الترتيب مهم بكل تأكيد.

كيفية عمل الخاصية

بنظرة أعمق على الخاصية نجد الكود السابق يقوم أولاً بالبحث عن نسخة محلية Local من الخط لها اسم مشابة، فإن لم تجد فتقوم بإستدعاء الخط المطلوب وعرضه، الجميل هنا  أنّه عندما تدرج خطاً ما، ولكن لا تستعمله في التصميم، فإن المتصفح لن يستدعيه.

فمثلاً إذا قمت بإدراج الخط “A”، وأدرجت منه وزنين Bold و Normal- عادي وسميك، ولكنك استعملت في موقعك العادي/Normal فحسب، فإن المتصفح سيستدعي الوزن العادي/Normal  فقط ويترك السميك/Bold، لكي يقلل من المساحة والوقت اللازمين لتحميل كل مكونات الصفحة المطلوبة.

مشاكل المتصفحات

6.1 Google chrome

غوغل كروم يحتوي مشكلة مزعجة قد لا يلاحظها الكثير، وهي تظهر بالتحديد لمستخدمي windows 7 أو أعلى، المشكلة تكمن في أنّ الخطوط تظهر بشكل سيء، وحوافها صلبة جداً …

 

مقارنة بين ظهور الخط في كروم وفايرفوكس

المشكلة غير موجودة في FireFox، وأيضا في IE بل فقط في كروم، وأيضاً موجودة فقط عندما تستعمل @font-face، السبب في هذه المشكلة هو:

في ويندوز 7 تم إضافة خاصية جديدة، تلك الخاصية تدعى DirectWrite وهي تستعمل لمعالجة الخطوط وإظهارهم بشكل أفضل، فايرفوكس و IE يدعمون هذه الخاصية، مما يعني ظهور الخط لديهم بشكل أفضل، أما كروم، فهو لا يدعمها بعد، بل يستعمل محرك خطوط آخر، طرحت المشكلة منذ أكثر من سنتين في قسم المشاكل لدى كرومينيوم والفريق يعمل على حل المشكلة، وحسب كلام فريق العمل (الذي يعمل في تطوير غوغل كروم) فإنهم يعملون على حل المشكلة، وسيتم طرح الحل قريبا (الأغلب في النسخة القادمة من كروم 34)، تم إصلاح المشكلة في chrome canary والحل سيكون قريباً في المتصفح العادي.

 

إصلاح مشكلة كروم في نسخة المطورين

حل هذه المشكلة حاليا ممكن، وهو بإستخدام خط svg (وهو ليس خطاً في الواقع) لكن للأسف، هذا الخط لا يدعم العربية!

 

تقطع الحروف في خط svg

لكن هذا لا يمنع إستعمال هذا الحل مع الخطوط اللاتينية وخطوط الأيقونات

 

مقارنة خط الأيقونات باستخدام خط svg من عدمه

ولنستعمل الخط لا يجب أن نزيل كل الخطوط الأخرى ونبقي على svg فحسب، ففي تلك الحالة FireFox لن يظهر الخط، فكما قلنا سابقاً فايرفوكس لا يدعم SVG، ولا ننسى أنّ حجم الخط كبير جداً، 4 أضعاف. ونحن لا نريد أن نثقل على المتصفح بدون فائدة (مثلاً متصفح IE)  لذا علينا أن نستهدف غوغل كروم فحسب وهي بإضافة الكود التالي بعد العبارة الأصلية:-

 

1

2

3

4

5

6

7

8

@media screen and (-webkit-min-device-pixel-ratio:0) {

@font-face {

font-family: 'Icon Font';

src: url('../fonts/font-name.svg?#font') format('svg');

font-weight: normal;

font-style: normal;

}

}

 

 

ما تقوم به عبارة @media هي تنفيذ الكود الذي بداخلها إذا تحقق الشرط، وهي مجرد جملة عشوائية تعمل في كروم فحسب

7.2 Mozilla Firefox

نأتي لصديقنا العزيز FireFox، فبالرغم كونه يعالج الخط بطريقة رائعة ليظهر بشكل جميل، إلا أن فايرفوكس لديه مشكلتان أخريتان:-

المشكلة الأولى هي أنّه لا يدعم SVG ونحن الآن لن نناقشها.

المشكلة الثانية تظهر عندما تقوم بإستضافة الخط في موقع آخر.

المشكلة الثانية تظهر عندما ترغب في استخدام احدى خدمات الـCDN حيث تضع ملفات الاستايل CSS والصور على سيرفر آخر غير الموجود عليه ملفات الموقع، فلنقل مثلاً أنّك تملك موقع “A” ورابطه هو كالتالي www.site-a.com ولديك موقع آخر وليكن “CDN” رابطه www.CDN.com وأنت تضع الخطوط في ذلك الموقع “CDN” وتريد استخدامها في “A”، في متصفح آخر، سيعمل الأمر بكل سلاسة. وسيظهر الخط الذي ربطته أنت من “CDN إلى “A”، أما في فايرفوكس، فالخط لن يعمل، والسبب هو أنّه لا يسمح بتحميل الخطوط من مصدر خارجي، تدعى هذه المشكلة بـ  (CORS headers) وهي أنّه يمنع استيراد الخطوط الخارجية.

لحل هذه المشكلة يجب التعديل على ملف .htaccess الموجود في الموقع الذي يقدم الخطوط “موقع “CDN” في حالتنا”

 

1

2

3

<filesmatch ".(ttf|otf|eot|woff)$">

 

Header set Access-Control-Allow-Origin "*"

 

 

يمكن تغيير النجمة الموجود بين علامتيّ اقتباس إلى رابط موقعك لمنع أيّ شخص آخر من استخدام الخطوط.

ويجب أيضاً تغيير شيء آخر وهو مسار الخطوط، فعندما يكون المسار مثلاً:-

 

1

url('../fonts/font-name.svg?#font')

 

 

فالحل لن يعمل هكذا، والأحسن تغييره إلى المسار الكامل المطلق:-

 

1

url('www.site-b.com/fonts/font-name.svg?#font')

 

 

حماية الخطوط

الكثير منا لا يجد خطوط عربية مجانية تناسبه، والبعض الآخر يريد استخدام الخطوط المدفوعة الجميلة في موقعه (مثلي أنا) لكن لا يجد طريقة آمنة لوضعها، لأنّه بما أنّ المستخدم يرى الخطوط أمامه فهذا يعني أنّه يستطيع تحميله، إذا ستكون هناك مشكلة “الحقوق”، حيث أن كل الخطوط المدفوعة لا تسمح لنا بتوزيع الخطوط مما يعتبر قرصنة، هذا الأمر أزعجني لوقت طويل (ومازال يزعجني) ولم أجد للآن حلاً فعالاً لحماية الخطوط، هناك بعض الطرق المتفرقة من بينها مثلاً ربط خط EOT بموقع واحد مما يعني عدم استعماله في مكان آخر. المشكلة في هذا الحل الرائع من مايكروسوفت هو أنّ الامتداد غير مدعوم في أيّ متصفح آخر عدا متصفح IE!

بعض الطرق الأخرى المعقدة مثل التي تستخدمها خدمات توزيع الخطوط المدفوعة (TypeKit) تستخدم عدة طبقات حماية وتظليل للحد من محاولة الوصول إلى الخطوط.

سأستعرض هنا طريقة بسيطة طرحها أحد المطورين في مجتمع موزيلا، وفي الأغلب ستمنع الكثير من الأشخاص العديمي خبرة في هذه المجالات من الوصول إلى الخط.

في ملف .htaccess الموجود في مجلد الخطوط (إن لم يكن موجوداً، اصنعوا واحدا)

 

1

2

3

4

5

6

7

</pre>

RewriteEngine On

RewriteCond "%{HTTP_HOST}_%{HTTP_REFERER}" "!\.?([^\.]+\.[^\.]+?)_https?://.*\1/.*$"

RewriteRule \.(woff|eot|ttf)$ - [F,NC,L]

RewriteCond %{HTTP_REFERER} !^$

Options -Indexes

<pre>

 

 

سيمنع الكود السابق أيّ شخص من الربط المباشر للخطوط في موقعه، أو حتى تحميلها مباشرة في المتصفح، غيّر domain باسم موقعك و com بامتداده.

تحويل الخطوط

وصلنا للجزء الرائع، عادة خطوط الويب نادرة أو قليلة جداً ولا نجد المناسب منها للويب إلا نادراً، لكن حسب النظرية، أيّ خط حاسوب يمكن استعماله كخط ويب، طبعاً يمكنك مباشرة استخدام امتداد TTF ولكن كما قلنا هناك متصفحات تقف عقبة أمامنا، لذا نستخدم عدداً من الإمتدادات المختلفة للخطوط، فربما نريد إستخدام WOFF فحسب، ولكن لا نعرف كيف نحوله.

font squirrel موقع رائع يقدم خدمة تحويل الخطوط ونشرها وإعطاءها لك بشكل جاهز، ما يعني أنّ ملف الستايل يكون معداً مسبقاً، وما عليك سوى ربطه بموقعك

اختاروا خيار basic لتظهر الخطوط العربية بشكل صحيح

كما أيضاً يمكنك استخدام برنامج FontForge مع أنّه بدا معقداً زيادة لي، لكنه قد يلبي حاجتكم.

في النهاية نستنتج أنّ خاصية font-face@ كانت في الواقع أشبه بصندوق مغلق فنحن كنا ننسخ رابطاً من غوغل ونغير الخط فحسب. الآن نستطيع استخدام هذه الخاصية عن فهم ودراية بكل خباياها وطرق حل مشاكلها

تسجيل الدخول إلى حسابك للوصول إلى ميزات مختلفة

او استخدم وسائل التواصل

إنشاء حساب

نسيت معلومات الدخول؟

عرض سعر

سنفعل كل ما في وسعنا لجعل مشروعك أفضل مشروع لدينا!

إشترك معنا في الأخبار

سوف تتلقى إشعارات عن أحدث العروض والعروض الترويجية

لا تظهر هذا مرة أخرى!
TOP