أفضل الخطوط المجانية للمصممين. الخطوط الآمنة قم بتنزيل مجموعة من الخطوط الروسية للويب

تم تخصيص الجزء الأول من الفصل للتعريف بخطوط CSS. ستتعلم في هذه الصفحة كيفية تضمين الخطوط في CSS، وما هي خطوط الويب وكيفية العمل معها، وما هي تنسيقات الخطوط الموجودة، وكيفية استخدام Google Fonts. أولاً، دعونا نلقي نظرة على مثال بسيط لتوصيل خط CSS:

P (عائلة الخط: Verdana;)

هذا الجزء الصغير من التعليمات البرمجية يعني ذلك لجميع العلامات

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

في وقت واحد، كان على المصممين تحديد العديد من الخطوط الاحتياطية بالإضافة إلى ذلك، في حالة عدم وجود الخط الرئيسي على جهاز الكمبيوتر الخاص بالمستخدم. لنفترض أنك تريد تنسيق النص بخط Verdana، وتثبيت Trebuchet MS وGeneva وأي خط sans-serif كخطوط احتياطية. هو مكتوب بهذه الطريقة:

P (عائلة الخط: Verdana، "Trebuchet MS"، جنيف، sans-serif؛ )

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

سيتم عرضه بهذا الخط. إذا كان الخط مفقودًا، فسيقوم المتصفح بالتحقق من وجود الخط التالي في القائمة - Trebuchet MS. إذا كان هذا الخط مفقودًا أيضًا، فسيتم التحقق من وجود الخط التالي - جنيف. إذا لم يكن جهاز الكمبيوتر الخاص بالمستخدم يحتوي على جنيف، فسيقوم المتصفح بتحديد خط sans serif آخر متاح ويعرض النص بهذا الخط.

يرجى الملاحظة:في الكود كتبنا اسم خط Trebuchet MS بين علامتي اقتباس. من الضروري وضع اسم الخط بين علامتي اقتباس مزدوجتين أو مفردتين عندما يحتوي على مسافات.

يمكنك أن تقرأ عن الخط serif (serif) وsans-serif (sans-serif) على صفحة ويكيبيديا.

خطوط الويب

الطريقة المذكورة أعلاه لاستخدام الخطوط لها عيب كبير - فأنت محدود بعدد الخطوط. سيتعين عليك أن تكون راضيًا فقط عن تلك الخيارات التي من المرجح أن تكون مثبتة على معظم أجهزة الكمبيوتر.

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

لذلك، لعرض الخط المطلوب في متصفح المستخدم، نحتاج إلى تنزيل هذا الخط على جهاز الكمبيوتر الخاص به. هذا من السهل جدًا القيام به. تفتح طريقة ربط الخطوط بـ CSS إمكانيات واسعة حقًا للمصممين. ولكن تجدر الإشارة إلى التطاير في المرهم: أولاً، لا يدعم كل متصفح تنسيق خط معين (مما سيؤدي إلى عدم عرض الخط)، وثانيًا، إذا كان ملف الخط كبيرًا، فقد يؤدي ذلك إلى إبطاء تحميل الصفحة.

دعم التنسيق

كيفية التعامل مع مشكلة عدم تطابق تنسيق الملف؟ دعونا نلقي نظرة على الجدول الذي يوضح تنسيقات الخطوط الأكثر شيوعًا ونرى المتصفحات التي تدعمها:

ملحوظة:يمكنك دائمًا معرفة أحدث المعلومات حول دعم تنسيق الخط على موقع الويب caniuse.com. يجب عليك إدخال اسم التنسيق (على سبيل المثال، ttf) في شريط البحث.

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

توصيل خط ويب باستخدام @font-face

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

@font-face ( عائلة الخط: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

تلعب خاصية عائلة الخطوط في هذه الحالة دورًا مختلفًا: بمساعدتها نقوم بتعيين اسم للخط، حتى نتمكن بعد ذلك من استخدام هذا الاسم عند كتابة النمط:

P (عائلة الخط: MyUniqueFont;)

يحدد السطر الثاني المسار إلى ملف الخط. في مثالنا، يوجد الملف MyUniqueFont.ttf في مجلد الخطوط. قد يكون عنوان URL الخاص بك مختلفًا.

خطوط جوجل

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

ملحوظة:المجموعة الكاملة لخطوط Google متاحة على الموقع الإلكتروني خطوط جوجل. في الصفحة، يمكنك استخدام مرشحات متنوعة للبحث عن الخطوط حسب الفئة والسمك والأبجدية.

سنصف أدناه كل خطوة من خطوات توصيل خط Google. لفهم ما نتحدث عنه، حدد أي خط من صفحة خطوط Google وافتحه بالنقر فوق زر الاستخدام السريع.

الخطوة 1: اختر النمط

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

الخطوة 2: اختر الأبجدية

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

الخطوة 3: أضف الكود إلى الموقع

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

...

الطريقة الثانية هي توصيل الخط باستخدام توجيه @import. يوجد الكود النهائي في علامة التبويب الثانية بالنقطة 3 على صفحة خط Google المحدد. ويجب إضافته إلى بداية ورقة الأنماط الخاصة بك (وإلا فلن يتم استيراد الملف). يبدو الرمز كالتالي:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

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

الخطوة 4: إنشاء نمط

بعد الانتهاء من الخطوات السابقة يمكنك البدء بتطبيق الخط. لقد رأيت بالفعل كيف تمت كتابة قاعدة CSS هذه مسبقًا:

P (عائلة الخط: "Roboto"، sans-serif؛ )

إذا قمت في الخطوة الأولى بتحديد عدة خيارات للخط (على سبيل المثال، قمت بإضافة خيار الخط الغامق Bold 700)، ففي الخطوة الثالثة سيتغير الرمز قليلاً:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

لجعل الخط غامقًا، اكتب نمط CSS مثل هذا:

P (عائلة الخط: "Roboto"، sans-serif؛ وزن الخط: 700؛ )

ملحوظة:في Google Fonts، يتم استخدام الوحدات التقليدية من 100 إلى 900 فقط للإشارة إلى وزن الخط، وبالتالي، فإن النمط العادي (افتراضيًا) يعادل قيمة 400 (عادي)، والنمط الغامق القياسي يعادل 700. (عريض).

المزايا الرئيسية لخدمة خطوط Google هي:

• سهولة الاستخدام (حتى المبتدئ يمكنه فهم الخدمة، ويتم إنشاء جميع التعليمات البرمجية اللازمة تلقائيًا - كل ما عليك فعله هو نسخها)؛
• توافر الخطوط (لا حاجة لدفع ثمنها)؛
• يتم توفير جميع تنسيقات الخطوط المستخدمة (وهذا يعني أن كل متصفح سيكون قادرًا على تنزيل تنسيق الخط الذي يعمل به بالضبط).

من بين عيوب الخدمة عدم وجود تنوع كبير في الخطوط، وخاصة السيريلية. بالمناسبة، هناك خدمات أخرى مماثلة على الإنترنت، على سبيل المثال، TypeKit (المدفوعة).

نتائج

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

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

01. لماذا نحتاج إلى خطوط الويب أصلاً، ولماذا لا نحتاج إلى الخطوط القياسية؟

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

ويمكن للمرء أن يتخلى تماما عن الخطوط القياسية، خاصة وأن العديد من أنظمة تشغيل الأجهزة المحمولة لا تدعمها (على سبيل المثال، Arial، Taūma، Verdana وGeorgia). ولكن لسوء الحظ، فإن الصناعة، التي تم تعديلها لسنوات عديدة إلى شاشات 96 نقطة في البوصة وجورجيا فيردان، لم تكن جاهزة تمامًا للتغييرات السريعة، وفي أنظمة تشغيل Windows الأقدم، لا تزال هناك مشكلات في عرض الخطوط غير القياسية بسبب خصوصيات آلية التنقيط.

02. كيف تختار خط الويب الجيد؟

الخط ليس مجرد مجموعة رقمية من الحروف التي تم إنشاؤها باستخدام فرشاة على الورق أو في Illustrator، ولكنه أيضًا عبارة عن ضبط وصقل بنسبة 98٪، وتلميح واختبار على وسائط مختلفة وبأحجام مختلفة. يبدو هذا الخط جيدًا، وأسلوبه مصقول، ولن تكون هناك مشاكل معه سواء على الطابعة أو على الشاشة، فهو ينضح بجودة جيدة.

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

03. كيف تعرض المتصفحات الخطوط؟

كثيرًا ما سمعت أن المتصفحات ترسم الخطوط بنفسها، لذا فهي تبدو مختلفة في كل مكان. ولكن في الواقع، يشارك نظام فرعي خاص للرسومات في نظام التشغيل في تقديم الخطوط: في نظام التشغيل Windows هذا جي دي آيأو الكتابة المباشرةوعلى نظامي التشغيل OS X وiOS - CoreText(و QuickDraw سابقًا). هناك ثلاث آليات شائعة لتنقيط (عرض) الخط: بكسل ثنائي اللون (أبيض وأسود)، وبكسل أحادي اللون (يسمى غالبًا الصقل أو الصقل العادي) والبكسل الفرعي. يستخدم Subpixel ميزة شاشات LCD وشاشات البلازما، حيث يتم تقسيم كل بكسل إلى 3 أجزاء (الأحمر والأخضر والأزرق)، وذلك لزيادة الدقة الأفقية للصورة المقدمة وتحسين الوضوح.

ومع ذلك، تختار المتصفحات طريقة العرض الخاصة بها من تلك التي يوفرها نظام التشغيل. على سبيل المثال، يحتوي GDI على 3 خيارات للعرض: الأبيض والأسود، والتنعيم العادي، والبكسل الفرعي كليرتايب. تكمن خصوصية هذا الأخير في أن التجانس يحدث أفقيًا فقط، وفقًا لموقع وحدات البكسل الفرعية. ولهذا السبب غالبًا ما نرى خشونة رهيبة على الخطوط الأفقية والقطرية للخط عند استخدامه. ولحسن الحظ، بدأت Microsoft في تحسين الآلية ببطء، وتم استبدال GDI بتقنية DirectWrite، التي قدمت بالفعل خاصية منع التعرج العمودي. يقارن:

04. TTF أو OTF؟

كان TrueType وPostScript في الأصل تنسيقات خطوط مختلفة. يستخدم TrueType منحنيات Bezier التربيعية، بينما يستخدم PostScript منحنيات مكعبة، وهي مألوفة لدى المصممين العاملين في Illustrator وPhotoshop. اليوم، يتم استخدام كلا الطريقتين لوصف المنحنيات كجزء من نفس تنسيق OpenType، مع الاختلاف الوحيد وهو أن ملفات TrueType لها امتداد TTF، وملفات PostScript لها امتداد OTF. تتمتع كل تقنية بميزات التلميح الخاصة بها وتفاصيل التطبيق.

انظر إلى الصورة. إذا كان خط TrueType أكثر قابلية للقراءة بحجم صغير، ولكن في الحجم الكبير نرى أسنانًا مميزة، فكل شيء بالنسبة لخط PostScript هو عكس ذلك تمامًا. وذلك لأن المتصفحات تختار طرقًا نقطية مختلفة لـ PS وTT. بالنسبة إلى PS، قام المتصفح بتطبيق تنعيم عادي أحادي اللون، وتمت معالجة TT باستخدام ClearType. لذلك اتضح أن TrueType سيكون أفضل لخطوط النص، وPostScript أفضل للعناوين والنقوش الكبيرة.

ونرى أيضًا أنه ليس كل المتصفحات تستخدم DirectWrite حتى الآن. لذا، فهو لا يزال غير موجود في Google Chrome.

05. ما الذي يؤثر أيضًا على الشاشة؟

في بعض الأحيان يكون من الأفضل ضبط طريقة التنقيط يدويًا. على سبيل المثال، في المتصفحات التي تحتوي على محرك Webkit، يمكنك استخدام خاصية -webkit-font-smoothing CSS وتمكين التجانس المنتظم يدويًا بدلاً من تجانس البكسل الفرعي، والعكس صحيح. هناك أيضًا طرق غير تافهة لجعل المتصفح يغير طريقة التنقيط؛ في حبري، اقترحوا ذات مرة استخدام الاختراق باستخدام text-shadow .

يجب ألا ننسى حجم الخط (حجم الخط). يمكن أن يختلف شكل المخطط التفصيلي وتباين الحد وسهولة القراءة بشكل كبير بين أحجام الخطوط. اترك محرر الرسومات جانبًا وشاهد كيف يبدو خط الويب في المتصفح أثناء العمل.

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

06. هل تحتاج خطوط الويب إلى تلميحات؟

التلميح عبارة عن تعليمات خاصة تربط المنحنيات المجردة للخط بشكل صارم بالبكسلات الموجودة على الشاشة. لم يتم التلميح إلى الغالبية العظمى من الخطوط (بما في ذلك الخطوط التجارية)، لأن هذا إجراء يتطلب عمالة مكثفة ومعقدة. يتم تنفيذ التلميح بشكل مختلف بالنسبة لـ TrueType وPostScript. إذا كنت تستخدم خطًا رخيصًا، فإن تنسيق OTF يكون أكثر أمانًا، لأنه في TT ظل الإجراء دون تغيير منذ أيام التنقيط بالأبيض والأسود وهو ليس مناسبًا تمامًا، ولكن بالنسبة لـ PS، يكون الإجراء أبسط، والمؤلف لديه الفرصة لـ القيام بالتلميح التلقائي.

يصبح الخط الذي لا يحتوي على تلميحات ضبابيًا عند تحويله إلى نقطية، وقد يقفز ارتفاع الحروف.

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

في نظام التشغيل Windows، نرى ربما النهج الأكثر تطرفًا: تم التلميح إلى الخطوط الشائعة مثل Tahoma وVerdana وArial وGeorgia خصيصًا لـ GDI ClearType، وعندما ظهر DirectWrite، كان لا بد من إعادة التلميح إلى الخطوط الرئيسية المضمنة في نظام التشغيل وتحديثها.

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

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

07. @font-face أم كوفون؟

بغض النظر عن مدى غرابة الأمر، لا يزال هناك أشخاص يسألون أنفسهم هذا السؤال. يبدو أنه بعد أن بدأت المتصفحات في دعم سمة @font-face، أصبحت جميع تقنيات تضمين الخطوط الأخرى (Cufon، sIFR، Flash) غير ذات صلة. ولكن لا يزال هناك بعض المعنى، على سبيل المثال، طريقة لاستبدال الخط بصورة، عندما لا يتم عرض منحنيات متجهة على الموقع، ولكن فقط طباعة، مثل الطابعة التي تطبعها على ورقة أو يقوم Photoshop بإخراج ملف JPG غير قابل للتحرير. هذا مسموح به من خلال العديد من تراخيص الخطوط العادية (سطح المكتب). تسمح بعض الشركات المصنعة للخطوط (على سبيل المثال، Adobe) بتضمين خط سطح المكتب (في البرامج وعلى الخادم)، طالما ظل محميًا ولا يمكن تنزيله.

إذا لم تتمكن من شراء ترخيص ويب منفصل، فيمكنك استخدام sIFR المناسب عندما يكون الخط مضمنًا باستخدام كائنات Flash. العيب هو أنه يستخدم فلاش، وهو غير مدعوم على جميع الأجهزة. يمكنك أيضًا استخدام تقنية Cufon (يتم استخدام القماش)، إذا كان الترخيص يسمح بذلك. بالطبع، في هذه الحالة، سيكون البرنامج النصي مرهقًا، ولن ينجح اختيار النص، ولكنه سيفي بالغرض في المواقف اليائسة.

لكن من الأفضل استخدام @font-face، فهو أكثر تقدمًا من الناحية التكنولوجية وأكثر ملاءمة، وبالإضافة إلى ذلك، فقد تراكمت خبرة كافية للعمل معه. لها عيب واحد فقط: لا تسمح جميع الشركات المصنعة باستخدام خطوطها على الويب.

08. ما هي التنسيقات التي يجب أن تكون بها ملفات الخطوط؟

اليوم الخطوط المعدة للتنفيذ (@font-face) على موقع الويب يجب أن تكون بعدة صيغ:

تي تي إفأو OTF- ملف خط مألوف لدينا، ولكن يتم تحميله من الخادم أثناء عرض الموقع؛
WOFF- ربما يكون أرشيف المصدر غير المحمي OTF أو TTF هو التنسيق الأكثر أهمية الذي تدعمه معظم المتصفحات الشائعة، وعادةً ما تكون الملفات الموجودة في WOFF أخف بمقدار 2-2.5 مرة من الملفات الأصلية؛
محكمة تكافؤ الفرص- هناك حاجة إلى أرشيف يتم تنفيذه بواسطة TT OpenType، والذي يحتوي على آليات حماية، لدعم متصفحات Internet Explorer الأقدم (بدءًا من IE8، بالإضافة إلى منحنيات TrueType، يتم دعم PostScript أيضًا)؛
SVG- لدعم متصفح سفاري.

09. هل يمكن تحويل خطوط الويب؟

بغض النظر عما يخبرك به الأشخاص، لا يمكنك ببساطة تحويل ملف والاحتفاظ بالجودة الأصلية للخط، خاصة إذا كان في الأصل بتنسيق OpenType. في هذه العملية، هناك احتمال لفقد بعض البيانات المضمنة في ملف الخط (التعليمات المجمعة، والأحرف الإضافية، والمقاييس). ستلاحظ هذا عندما "يفقد وزن" الملف فجأة أثناء التحويل؛ فمن غير المقبول بشكل خاص تحويل TrueType إلى PostScript والعكس.

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

10. ما هو الوزن الذي يجب أن تزنه خطوط الويب؟

يجب أن يقوم المتصفح بتنزيل ملفات الخطوط بالكامل قبل عرض الصفحة. ربما تكون قد شاهدت تأثير "فلاش الخط" (أو FOUT)، عندما تومض خطوط النظام القياسية للحظة قصيرة بدلاً من الخطوط الغريبة. من الطبيعي أن يتناسب TTF (OTF) مع 100 كيلو بايت، وWOFF (EOT) يصل إلى 50 كيلو بايت. فكر دائمًا فيما إذا كنت بحاجة إلى استخدام الخطوط المخصصة على الإطلاق، حتى إذا كنت تستخدمها في عنوان قصير واحد، فلا يزال يتعين عليك تنزيل ملف الخط بأكمله.
كلما كان التصميم أكثر كمالا، كلما كان وزن ملفات الخطوط أصغر، وحاول اختيار أشكال بسيطة. وبهذا المعنى، فإن الشكل المثالي هو بشع هندسي مفتوح مع تباين منخفض. لتسريع تحميل الخط، قد يكون من المفيد أيضًا تضمينه في ملف النمط باستخدام data:uri.

11. ما هو عدد أنماط الخطوط التي يمكن استخدامها على الويب؟

من وجهة نظر المصمم، الكثير من الخطوط رائعة. وبالفعل، بالنسبة للرأس - غامق، وهناك، بالنسبة للداخل - ExtraLight، سنقوم عمومًا بدفع النصوص غير الضرورية وضغطها إلى مكثف غامق. ومن هنا - الثروة الحقيقية والتنوع الأسلوبي. ولكن عندما يبدأ نقل كل هذه "الثروة" إلى الموقع، يتبين أن كل شيء يسير ببطء شديد. ومن الأفضل عدم محاولة فتح مثل هذا الموقع من جهاز محمول. لا تنس أيضًا أن كل نمط يكلف أموالًا منفصلة، ​​ومن المحتمل أن يطلب منك العميل إما العثور على مرادف للخط، أو تقليل عدد الأنماط، فقط حتى لا يشتري كل الخطوط الباهظة الثمن. من الطبيعي استخدام 2-3 أنماط كحد أقصى من نفس الخطوط أو خطوط مختلفة.

12. هل من الضروري الحد من مجموعة الأحرف؟

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

بالنسبة لأولئك الذين يجعلون المواقع باللغة الإنجليزية أسهل، فإنهم لا يحتاجون إلى تحميل أحرف إضافية على الإطلاق، فالأحرف اللاتينية الأساسية (أو ASCII) كافية. إذا كنت تستخدم الخط فقط للعناوين باللغة الروسية + تضمينات اللغة الإنجليزية، فستكون مجموعات ASCII (اللاتينية الأساسية) و64 حرفًا من الأبجدية الروسية كافية لك، فليس من الضروري على الإطلاق تحميل مجموعة السيريلية الموسعة المكونة من 420 حرفًا . إنها قصة مختلفة تمامًا إذا كان موقعك متعدد اللغات، وفي هذه الحالة، لتجنب العرض غير الصحيح للأحرف، عليك محاولة تغطية جميع اللغات المستخدمة.

13. هل يمكنني استخدام نسخ الخطوط؟

يحدث أن شراء الخط الأصلي إما مكلف للغاية أو حتى مستحيل، فسيكون من المناسب اختيار مرادف الخط (استنساخ). بالطبع، لا ينبغي أن تتوقع منهم جودة مذهلة، حتى لو كانت مصنوعة من قبل شركة روسية مشهورة. كل شيء سيء تمامًا عندما تصادف تأليف شخص متعلم مجهول قرر تجربة نفسه في مجال جديد، احذر من مثل هذه الخطوط. فيما يلي أمثلة على النسخ (يشار إلى الأصل بين قوسين): FreeSet (Frutiger)، Pragmatica وHelios (Helvetica). يرجى ملاحظة أن أشكال الحروف قد تختلف. يوجد عدد كبير من النسخ في دليل مرادفات خطوط Paratype.

14. كيفية اختبار الخط؟

لا يعتاد المصممون على رؤية الخطوط من خلال نوافذ Photoshop فقط، ويستخدم محررو الرسوم أساليبهم الخاصة في تجانس النص، ويمكن خداعك بالصورة الجميلة. من المفيد جدًا معرفة كيفية اختبارها ومشاهدتها في المتصفحات. إذا كانت هناك صفحة تجريبية، فتأكد من عدم ظهور جميع أنواع المصنوعات اليدوية والمسامير أثناء العرض. هناك أيضًا أداة تسمى Typecast، حيث يمكنك التحقق من العديد من الخطوط ثم عرض الصفحة للعميل. بالنسبة لأولئك الذين يختارون خطًا جديدًا لموقع ويب تم الانتهاء منه بالفعل، فإن خدمة Web Fonts Previewer لا غنى عنها بالنسبة لك؛ حيث يمكنك اختبار أي خط على موقع ويب مباشر وعامل، كما لو كنت قد قمت بتطبيقه بالفعل.

15. لدي خط على جهاز الكمبيوتر الخاص بي، هل يمكنني استخدامه في الموقع؟

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

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

16. كيف يمكن شراء خط ويب؟

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

إحدى الطرق الملائمة لشراء الخطوط هي من خلال كتالوجات الخطوط (Fonts.com، وMyFonts، وAscender، وTypekit). ستتمكن من عرض ومقارنة واختيار أحد الخيارات المتاحة للاستخدام والدفع بالبطاقة. أسهل طريقة للشركات هي الاتصال مباشرة باستوديو الإنتاج أو ترك شراء الخطوط للعميل

أو ربما من الأفضل عدم إنفاق المال على الخط على الإطلاق؟ هناك العديد من الخطوط المجانية الرائعة التي لا تقل جودة عن الخطوط المدفوعة!

17. ما هي أنواع التراخيص الموجودة؟

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

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

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

تراخيص مجانية (ملكية عامة) - يسمح مؤلف الخط بالتوزيع المجاني، مع أو بدون شرط الإشارة إلى اسمه (Creative Commons) (على سبيل المثال، OFL، GPL، Apache 2.0). ويسمح هذا النوع من التراخيص بالاستخدام التجاري، بخلاف المبيعات والتوزيع المدفوع. أمثلة: PT Sans، Opensans، Droid. في بعض الأحيان يُسمح بتعديل الخط (GPL)، لكن التعديل الذي تقوم بإنشائه يرث تلقائيًا نفس الترخيص (مما يعني أنه يمكن أن يتم تشعبك أيضًا). تفترض الحرية أنه يمكن استخدامها على أي وسيلة إعلامية، بما في ذلك. والويب.

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

18. كيف تختلف التراخيص لخطوط الويب؟

تراخيص الويب هي المفضلة لدينا، فهي إما بالإضافة إلى الترخيص الرئيسي أو يتم منحها بشكل منفصل. ينظم حالة خاصة - استخدام الخطوط على مواقع الويب. كقاعدة عامة، القيد الأكثر أهمية هو عدد مشاهدات الصفحة. على سبيل المثال، 10 آلاف شهريًا، أو 100 ألف أو 1 مليون، أي أنه كلما زاد عدد الأشخاص الذين يزورون موقعك، زاد المبلغ الذي تدفعه مقابل الترخيص. هناك أيضًا خيارات غير محدودة، عندما تدفع ثمن الخط مرة واحدة، لكنها أغلى بعدة مرات. ربما تساءلت، هل يقوم أحد بتتبع عدد المشاهدات؟ في أغلب الأحيان لا. لكن لا تنس أن عددًا كبيرًا من العدادات تراقب حركة مرور موقعك، وإذا أثارت شكوك البائع، فقد تفقد ترخيصك.

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

بعد الشراء، تتلقى ملفات خاصة تقوم بتضمينها في الموقع (TTF، OTF، WOFF، EOT)، وبعض الخطوط لا تسمح بوضع هذه الملفات على الموقع في شكل غير محمي، حيث أنه من الناحية النظرية يمكن لأطراف ثالثة الحصول على ملفات الخطوط نفسها. الخيار الثالث هو استخدام خدمة ويب خاصة تابعة لشركة مصنعة للخطوط، مثل Typekit المملوكة لشركة Adobe، ودفع رسوم الاشتراك.

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

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

1. الخطوط التي سيتم عرضها بدون مشاكل للغالبية العظمى من المستخدمين.
2. الخطوط التي لا تمتلكها مجموعة كبيرة من المستخدمين.

إذا استخدم المصمم خطوط الفئة الثانية لإنشاء، على سبيل المثال، شعار أو عناوين ثابتة كبيرة، فلا يمكنك التردد في استخدام هذه التقنية. عيب استخدام هذه التقنية هو عدم المرونة. إذا كانت هناك تغييرات في النص، فسيتعين عليك إعادة الصورة وتغيير CSS (على سبيل المثال، إذا كانت أبعاد الصورة الجديدة لا تتطابق مع الصورة القديمة).

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

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

الخطوط القياسية

الخطوط القياسية هي مجموعة من الخطوط المثبتة مع نظام التشغيل. وبما أن أنظمة التشغيل مختلفة، فإن مجموعة الخطوط الخاصة بها مختلفة. يمكن العثور على قائمة الخطوط القياسية للإصدارات المختلفة من Windows، على سبيل المثال، في المقالة خطوط Windows القياسية، وقائمة خطوط Mac OS القياسية في صفحة الخطوط المضمنة في Mac OS. أما أنظمة التشغيل Unix/Linux فلا تحتوي على مجموعة واحدة من الخطوط. يستخدم العديد من مستخدمي Linux مجموعة خطوط DejaVu، خاصة على Ubuntu التي يتم تثبيتها افتراضيًا. وفقًا للإحصائيات الواردة من http://www.codestyle.org، فإن العديد من مستخدمي Unix/Linux لديهم أيضًا مجموعات خطوط URW وFree ومجموعات خطوط أخرى مثبتة. وفقًا لنفس الإحصائيات، فإن أكثر من 60% من مستخدمي Unix/Linux لديهم خطوط من مجموعة الخطوط الأساسية للويب على أجهزة الكمبيوتر الخاصة بهم، والتي كانت حتى عام 2002 متاحة رسميًا للتنزيل المجاني على موقع Microsoft على الويب.

لكي يتم عرض الصفحة بالشكل الذي أراده المصمم، على أي نظام تشغيل، من الممكن تحديد عدة خطوط في خاصية CSS، مفصولة بفواصل.

تحدد هذه الخاصية قائمة ذات أولوية لأسماء عائلة الخطوط و/أو أسماء العائلة العامة. وفقًا لمواصفات CSS2، هناك نوعان من أسماء عائلة الخطوط:

1. اسم عائلة الخط الذي تختاره. على سبيل المثال، "تايمز نيو رومان"، "أريال" وغيرها. يجب أن تكون أسماء عائلة الخطوط التي تحتوي على مسافات محاطة بعلامات اقتباس. إذا كانت علامات الاقتباس مفقودة، فسيتم تجاهل أي أحرف مسافات قبل اسم الخط وبعده، وسيتم تحويل أي تسلسل للمسافات داخل اسم الخط إلى مسافة واحدة.
2. عائلة عامة (مشتركة). تحدد المواصفات العائلات العامة التالية:
   • serif - الخطوط ذات الرقيق في نهايتها؛
   • بلا الرقيق - الخطوط بلا الرقيق؛
   • مخطوطة - الخطوط المائلة؛
   • الخيال - الخطوط الزخرفية.
   • monospace - خط أحادي المسافة (بأحرف بنفس العرض).
   أسماء عائلة العشيرة هي كلمات رئيسية ولا تحتاج إلى وضعها بين علامتي الاقتباس.

وبالتالي، بالنسبة للتصميم، يتم أخذ خط قياسي من نظام التشغيل Windows، ويتم تحديد خط مماثل لنظام التشغيل Mac OS وUnix/Linux، ويتم تحديد عائلة خطوط مشتركة، وبذلك تكون قد انتهيت.

لكن الأمر ليس بهذه البساطة. دعونا نحفر بمزيد من التفاصيل.

العثور على الخطوط الآمنة للويب

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

يمكن اعتبار بعض الخطوط آمنة مع بعض التحفظات.

كان أساس تحديد الخطوط "الآمنة" هو خطوط نظام التشغيل Windows الأكثر شيوعًا، والتي تُستخدم أيضًا في أنظمة التشغيل الأخرى. مثال على هذا الاستخدام هو الخطوط الأساسية المذكورة سابقًا لحزمة خطوط الويب، والتي، وفقًا للإحصائيات، تم تنزيلها بواسطة العديد من مستخدمي Unix/Linux.

تتضمن هذه الحزمة الخطوط التالية: Andale Mono، Arial Black، Arial، Comic Sans MS، Courier New، Georgia، Impact، Times New Roman، Trebuchet MS، Verdana، Webdings. كلهم يدعمون الأبجدية السيريلية، وهو أمر مهم بالنسبة لRunet.

تتضمن مجموعة الخطوط التي تأتي بشكل قياسي مع نظام التشغيل Mac OS X (نظام التشغيل هذا هو الأكثر استخدامًا على نطاق واسع بين مستخدمي Mac OS) جميع الخطوط من الخطوط الأساسية لمجموعة الويب.

وبالتالي، استنادًا إلى خطوط Windows المستخدمة في أنظمة التشغيل الأخرى، تم تشكيل القائمة التالية لما يسمى بخطوط الويب "الآمنة":

• اريال
• اريال بلاك
• هزلية بلا MS
• ساعي جديد
• جورجيا
• تأثير
• تايمز نيو رومان
• منجنيق MS
• فيردانا

يحتوي خط Webdings على أيقونات ولا يمكن استخدامه للمحتوى. لا يتم استخدام Andale Mono على نطاق واسع لأنه غير مناسب لقراءة الشاشة اليومية ولا يمتلكه جميع مستخدمي Windows.

كل مستخدمي Windows وMac OS X والغالبية العظمى من مستخدمي Unix/Linux (أي أولئك الذين قاموا بتثبيت الخطوط الأساسية لحزمة الويب) لديهم كل هذه الخطوط.

ولكن ماذا عن الباقي؟ ففي النهاية، أنت تريد أن يرى أكبر عدد ممكن من المستخدمين خطة المصمم!

اقرأ عن هذا في الجزء الثاني من المنشور.

الخطوط

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

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

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

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

يوفر CSS3 الدعم للخطوط المعقدة من خلال القدرة @الخط الوجه، والذي يتم تطبيقه على النحو التالي:

يتم تحميل الخط المطلوب (أو، على الأرجح، إصدارات متعددة من الخط لدعم المتصفحات المختلفة) إلى الموقع.

يتم تسجيل كل خط في ورقة الأنماط باستخدام الأمر @font-face.

يتم استخدام الخط المسجل في قواعد النمط من خلال تحديد اسمه، تمامًا مثل خطوط الويب العادية.

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

سننظر في هذه الخطوات بمزيد من التفصيل في الأقسام اللاحقة.

تنسيقات خطوط الويب

على الرغم من أن جميع المتصفحات الحديثة تدعم ميزة @font-face، إلا أنها لا تدعم جميعها نفس أنواع ملفات الخطوط. على سبيل المثال، يدعم Internet Explorer، الذي قدم @font-face لسنوات عديدة، فقط ملفات EOT (Embedded OpenType). يوفر هذا التنسيق عددًا من الفوائد، مثل استخدام الضغط لتقليل حجم ملف الخط، والترخيص الصارم لموقع الويب بحيث لا يمكن سرقة الخط من موقع واستخدامه في موقع آخر.

لكن تنسيق EOT لم يحظى بشعبية كبيرة على الإطلاق ولا يتم استخدامه بواسطة أي متصفحات أخرى. وبدلاً من ذلك، تعمل المتصفحات باستخدام معايير الخطوط الأكثر شيوعًا المستخدمة في تطبيقات الكمبيوتر - TTF (TrueType) وOTF (OpenType PostScript). بالإضافة إلى ذلك، هناك نوعان آخران من عرض الخطوط - SVG وWOFF. يقدم الجدول أدناه وصفًا موجزًا ​​لجميع تنسيقات الخطوط هذه:

تنسيقات الخطوط المضمنة

شكل	وصف	تستخدم في
TTF (TrueType)، OTF (OpenType PostScript)	تنسيقات الخطوط الشائعة لسطح المكتب	Firefox (حتى الإصدار 3.6)، Chrome (حتى الإصدار 6)، Safari وOpera
EOT (نوع مفتوح مضمن)	تنسيق خاص بمنتجات Microsoft. لم يكتسب شعبية بين المتصفحات، باستثناء إنترنت إكسبلورر	إنترنت إكسبلورر (حتى IE 9)
SVG (رسومات متجهة قابلة للتحجيم)	تنسيق رسومات عالمي يمكن استخدامه لإنشاء الخطوط. يعطي نتائج جيدة ولكنها ليست رائعة - يتم عرضه ببطء ويظهر نصًا منخفض الجودة	Safari Mobile (على iPhone وiPad حتى iOS 4.2) والأجهزة المحمولة التي تعمل بنظام التشغيل Android
WOFF (تنسيق الخط المفتوح على الويب)	ربما تنسيق خط موحد للمستقبل. مدعومة بإصدارات المتصفح الجديدة	أي متصفح يدعمه بدءًا من Internet Explorer 9 وFirefox 3.6 وChrome 6

خلاصة القول هي: إذا كنت تريد الاستفادة من ميزة @font-face ودعم مجموعة واسعة من المتصفحات، فأنت بحاجة إلى توفير الخط الخاص بك بعدة تنسيقات مختلفة. كحد أدنى، يجب توفير الخط بتنسيق TTF أو OTF (لا فرق)، وتنسيق EOT وSVG. من الجيد (ولكن ليس من الضروري) أيضًا توفير الخط بتنسيق WOFF المناسب للمستقبل، والذي قد يصبح أكثر شيوعًا ويحظى بدعم أفضل في المستقبل. (إحدى ميزات هذا التنسيق هو أنه يستخدم ملفات مضغوطة، مما يقلل من وقت التنزيل.)

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

تبدو العديد من الخطوط سيئة على نظام التشغيل Windows XP بسبب... في إعدادات العديد من أجهزة الكمبيوتر التي تعمل بنظام التشغيل هذا، يتم تعطيل الصقل. (وبدون الصقل، تبدو الخطوط غير جذابة على الإطلاق.)

كانت هناك شكاوى من المستخدمين حول مشاكل الطباعة مع بعض الخطوط المضمنة من بعض المتصفحات أو أنظمة التشغيل.

بعض المتصفحات تعاني من المشكلة FOUT (فلاش نص غير مزخرف). تحدث هذه الظاهرة عندما يفشل تحميل الخط المضمن في الوقت المناسب، ويتم عرض الصفحة أولاً في الخط الاحتياطي ثم يتم عرضها مرة أخرى في الخط المضمن. هذه المشكلة ملحوظة بشكل خاص في الإصدارات القديمة من متصفح Firefox. إذا كنت مهتمًا حقًا بهذا الأمر، فيمكنك الاستفادة من مكتبة JavaScript الخاصة بـ Google، والتي تتيح للمطور تحديد الأنماط الاحتياطية المستخدمة بدلاً من الخطوط المضمنة غير المحملة، مما يمنحه التحكم الكامل في عرض النص في أي وقت.

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

مجموعات الخطوط

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

يوفر موقع Font Squirrel عدة مئات من الخطوط عالية الجودة للتنزيل، ويتم تنظيمها في أقسام حسب الفئة (مثل Calligraphic أو Grunge أو Retro). لكن أفضل ما في الأمر هو أن كل هذه الخطوط متاحة مجانًا لأي استخدام، سواء كان ذلك على جهاز كمبيوتر شخصي لإنشاء المستندات أو على صفحة ويب على الإنترنت.

سيتم تنزيل مجموعة الخطوط كملف ZIP يحتوي على ملفات خطوط متعددة بتنسيقات مختلفة. لاستخدام خط في صفحة الويب الخاصة بك، يجب تحميل الملفات ذات تنسيقات الخطوط المختلفة إلى خادم الويب في مجلد صفحة الويب هذه. يجب بعد ذلك تسجيل الخط حتى يكون متاحًا للاستخدام في ورقة الأنماط. يتم التسجيل باستخدام قاعدة @font-face المعقدة في بداية ورقة الأنماط، والتي تبدو كما يلي:

@font-face ( عائلة الخط: "MetrohobicRegular"; src: url("Metrohobic-webfont.eot"); src: local("Metrohobic"), url("Metrohobic-webfont.eot?#iefix") تنسيق( "مضمن-نوع مفتوح")، تنسيق url("Metrophobic-webfont.woff")("woff")، تنسيق url("Metrophobic-webfont.ttf")("truetype")، url("Metrophobic-webfont.svg#" MetrophobicRegular") تنسيق ("svg")؛ وزن الخط: عادي؛ نمط الخط: عادي؛ )

تؤدي أسطر التعليمات البرمجية أدناه الوظائف التالية:

يسجل التعبير @font-face خطًا لاستخدامه لاحقًا في ورقة الأنماط.

يمكن إعطاء الخط أي اسم. سيتم استخدام هذا الاسم لاحقًا عند استخدام الخط.

يجب تحديد تنسيق EOT أولاً، لأنه بقية القاعدة تربك برنامج Internet Explorer، ولا تهتم بالتنسيقات الأخرى. تخبر وظيفة ورقة الأنماط url() المتصفح بتحميل ملف من عنوان URL محدد. إذا كان الخط موجودًا في نفس المجلد الذي توجد به صفحة الويب، فيمكنك ببساطة تحديد اسم الملف هنا.

تخبر الدالة local() المتصفح باسم الخط، وإذا تم تثبيت هذا الخط على كمبيوتر زائر صفحة الويب، فإن المتصفح يستخدم الخط المحلي. ولكن في حالات نادرة يمكن أن يسبب هذا مشاكل. على سبيل المثال، اعتمادًا على مكان تثبيت الخط على كمبيوتر الزائر، قد تعرض أجهزة كمبيوتر Mac OS X تحذيرًا أمنيًا، أو قد يتم تحميل خط آخر بنفس الاسم الذي يحمله خطك. لهذا السبب، يقوم مطورو الويب أحيانًا بتحديد اسم ملف غير موجود بشكل واضح لمنع المتصفح من العثور على الخط المحلي. يمكن استخدام رمز لا معنى له كاسم بسيط لهذا النوع.

الخطوة الأخيرة هي إخبار المتصفح بملفات الخطوط الأخرى التي يمكنه استخدامها. إذا كان لديك ملف خط WOFF، فقم بإدراج هذا الملف أولاً لأنه يوفر هذا التنسيق أفضل جودة للخط. حدد ملف خط TTF أو OTF بعد ذلك، وملف SVG أخيرًا.

من خلال تسجيل خط ويب باستخدام وظيفة ©font-face، يمكنك استخدامه في أي ورقة أنماط. للقيام بذلك، نستخدم خاصية عائلة الخطوط المألوفة بالفعل، والتي يتم تعيين قيمة لها على شكل اسم عائلة الخطوط المسجلة باستخدام وظيفة @font-face (في السطر 2). فيما يلي مثال لاستخدام هذا الخط في قاعدة ورقة الأنماط:

Body (عائلة الخط: "MetrophobicRegular"؛ )

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

خطوط الويب جوجل

مصدر آخر لخطوط الويب المجانية هو الخدمة خطوط الويب جوجل. وتكمن خصوصيتها في أن المستخدم لا يحتاج إلى القلق بشأن تنسيقات الخطوط، لأنه... يكتشف Google متصفح زائر الصفحة ويرسل تلقائيًا ملف الخط بالتنسيق المطلوب.

لاستخدام خط Google على صفحاتك، اتبع الخطوات التالية:

• ترجمة

حان الوقت الآن للارتقاء بمستوى تصميمك باستخدام خطوط الويب

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

أصبحت حرية استخدام خطوط الويب خارج القائمة الآمنة في جميع أنظمة التشغيل الرائدة ممكنة إلى حد كبير بسبب ثلاثة عوامل تكنولوجية رئيسية متزامنة تقريبًا: الدعم واسع النطاق لقاعدة @font-face في المتصفحات؛ وظهور "مستودعات الخطوط" مثل Typekit وFontdeck؛ إنشاء تنسيق خط جديد - ملف خط WOFF مؤرشف.

* عدد قليل من هذه الخطوط مخصص للسيريلية، لذا فإن هذا الاختيار مناسب أكثر لـ "المتعاقدين الخارجيين". دعونا نأمل أن تظهر قريبًا على الأقل بعض هذه الخطوط وغيرها للغات السلافية باللغة السيريلية.إضافة العلامات