يعد استخدام الخطوط جزءًا لا يتجزأ من تصميم الويب. في كثير من الأحيان، نريد استخدام خط معين في صفحة ويب، ولكن الخط ليس خطًا مدمجًا في نظام التشغيل السائد، لذلك قد لا يرى المستخدمون التصميم الحقيقي عند تصفح الصفحة. الطريقة الأكثر شيوعًا التي يستخدمها مصممو الفن هي تحويل النص المطلوب إلى صور. وهذا له عدة عيوب واضحة: 1. من المستحيل استخدام الخط على نطاق واسع 2. ليس من السهل تعديل محتوى الصورة مقارنة لاستخدام النص؛ 3. ليس من السهل تعديل الخط بما يؤدي إلى تحسين محركات البحث لموقع الويب (لن تستخدم محركات البحث الرئيسية المحتوى البديل للصور كعامل فعال في الحكم على مدى ملاءمة محتوى الويب). هناك بعض الطرق التي تستخدم تقنية sIFR أو اختراق جافا سكريبت/الفلاش على الإنترنت، ولكنها إما مرهقة أو معيبة في تنفيذها. ما سأتحدث عنه بعد ذلك هو كيفية تضمين أي خط في صفحة ويب فقط من خلال سمة @font-face في CSS.

الخطوة الأولى

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

• .TTF أو .OTF لمتصفح Firefox 3.5 وSafari وOpera
• .EOT، لبرنامج Internet Explorer 4.0+
• .SVG لمتصفح Chrome وiPhone

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

الخطوة 2

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

إعلان الخط هو كما يلي:

@الخط الوجه {
عائلة الخط: 'fontNameRegular'؛
src: url('fontName.eot');
src: محلي ("اسم الخط عادي")،
محلي ("اسم الخط")،
تنسيق URL('fontName.woff')('woff')،
تنسيق url('fontName.ttf')('truetype')،
url('fontName.svg#fontName') تنسيق('svg');
}
/*استبدل اسم الخط باسم الخط الخاص بك*/

استخدم الخط عند الحاجة في الصفحة:

ع { الخط: 13px FontNameRegular، Arial، sans-serif }
h1{عائلة الخط: FontNameRegular}

أو

عقد القمر في الماء، ورائحة الزهور المتساقطة تملأ الملابس

فيما يلي مثال على ما قمت به من خلال الخطوتين أعلاه:

تشغيل مربع التعليمات البرمجية
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<الرأس>


http://www.blueidea.com/articleimg/2009/12/7263/style.css " />
<نمط النوع = "نص/CSS">
@الخط الوجه {
عائلة الخط: 'hakuyoxingshu7000Regular'؛
src: url('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');
src: local('hakuyoxingshu7000 Regular'), local('hakuyoxingshu7000'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') format('truetype'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') تنسيق('svg');
}
#قصيدة{
حجم الخط: 45 بكسل؛
عائلة الخط:hakuyoxingshu7000Regular;
محاذاة النص:مركز؛
}
#قصيدة p{height:30px;line-height:30px;}


<الجسم>