Если вы дизайнер или веб-мастер, то, скорее فقط تعرف كيفية دمج خطوط CSS. إذا كنت مالك مدونة صغيرة وقررت تزيين موردك وجعله فريدًا ، فيجب أن تساعدك هذه المعرفة. لكن من الأفضل أن تبدأ من البداية ، لفهم ما هي أوراق الأنماط المتتالية ، وأين تحصل على الخطوط ، ومكان تثبيتها.
وبالتالي فإن الإجابة على كيفية توصيل خط CSS بهيجب أن يبدأ الموقع بوصف للغة الرسمية نفسها. CSS هي ورقة أنماط متتالية. يتم استخدام هذه اللغة كتوصيف لمظهر المستند. وهو يعمل جنبا إلى جنب مع لغة الترميز.
تعمل CSS على توضيح الميزات المرئية للصفحات على الإنترنت. يجب أن يعتمد الأخير على لغات ترميز HTML أو XHTML خاصة.
الذي يحتاج CSS؟قم بتوصيل الخطوط وتعيين الألوان وترتيب الكتل وما إلى ذلك ، وهو أمر ضروري لمشرفي المواقع والمبرمجين الذين يعملون على إنشاء موقع. تتمثل المهمة الرئيسية لصفحات الأنماط المتتالية في الفصل بشكل هيكلي. أي إذا كان HTML يشكل كتلة صلبة من النص ، فإن CSS يساعد في "تزيين" هذه الكتلة بشكل مشروط ، وتسليط الضوء على العناصر ، وتعيين المعلمات.
يوفر الفصل إمكانية الوصول إلى المستندات ومزيدًا من المرونة والتحكم. يسمح لك بالتخلص من عناصر المحتوى المعقدة والمتكررة.
Прежде чем понять, как правильно подключать الخطوط في CSS ، تحتاج إلى فهم كيفية مزامنة أوراق الأنماط المتتالية مع الملف. يتم تطبيق قواعدهم باللغة التي تحمل الاسم نفسه. اكتسبت ورقة الأنماط نفسها قواعد CSS ، التي تستخدمها. يمكن أن تكون الجداول في مستند تم تحريره بصريًا ، أو في ملف منفصل بالملحق .css. عادةً ما يحتوي هذا الملف على أوامر وملاحظات فقط.
لذلك يصبح من الواضح أنه يمكن توصيل أوراق الأنماط بعدة طرق. لننظر فيها أكثر.
هناك أربعة خيارات للمساعدة.قم بتضمين خطوط CSS ، تعيين تدرج اللون ، تعريف القطع ، إلخ. كما ذكر سابقًا ، يمكن أن تكون مجموعة من القواعد في ملف مكتوب بلغة HTML. لكن هذا الخيار لا يحبه العديد من المصممين. يحدث هذا بسبب حقيقة أنه من الصعب العثور على المعلمات ووصفها وإدارتها كلها في اللوحة الكاملة للفرق. من الأسهل كثيرًا تعيين الأنماط في مستند منفصل.
إذا كانت CSS موجودة بشكل منفصل ، فإنها متصلة عبر علامة . يجب وضعه داخل
و . في هذه الملاحظة ، تحتاج إلى تحديد سمة href ، والتي ستعرض عنوان الملف باستخدام CSS.إذا تم تجميع الأوامر مرة أخرى كملف منفصل ،نقوم بتوصيلهم بمستند الويب من خلال توجيهimport. يجب كتابتها بين علامتي . بعد . والطريقة الرابعة تتضمن وضع القواعد في قلب إحدى العلامات ، من خلال سمة النمط. ثم ستؤثر القواعد على معلمة منفصلة ، والتي تقع داخل حدود نص معين.
ميزت الطريقتان الأوليتان ظهور أوراق الأنماط الخارجية ، والثانية - الداخلية.
ما هي الخطوط المستخدمة؟بالطبع ، يريد كل مالك موقع أن يبدو مصدره ليس جميلًا فحسب ، بل فريدًا أيضًا. أود أن أضع عناصر خاصة على الصفحات التي يمكن أن تبرز بين الجميع. غالبًا ما تلاحظ العناوين الرئيسية أو قوائم الكتابة المخصصة.
هناك العديد من الأسئلة حول هذا.ربما استخدم مشرفو المواقع الصورة المرسومة في Photoshop. ربما ظهر هذا الخيار بفضل Flash. هناك خيار يستخدم جافا سكريبت. ولكن كما تظهر الممارسة ، فإن الخيار الأول غير مريح وبطيء ، والثاني قديم ، والثالث مرتبك للغاية. لإنشاء شيء جديد وجميل ، يمكنك محاولة ربط خطوط CSS.
يجب أن يكون مفهوما أنه في حالتنا الخطوطليس فقط نمط معين ، ولكن أيضًا مجموعة من الخصائص التي تحتاجها للتحكم في مظهر النص. يمكنك استخدام عدة خيارات. تعيين خط معين للرأس ، الفقرة ، الاقتباس ، النص الأساسي ، القائمة ، إلخ.
على الرغم من حقيقة أن المستخدم لديه ضخمةمجموعة متنوعة من الأنماط والأحجام والتشبع ، وما إلى ذلك ، من المهم ألا ننسى سهولة القراءة. من الأفضل تجنب كومة كبيرة من الأساليب المختلفة. سيكون هناك خطان في الصفحة كافيين.
لتكون قادرة على اختيار النمطالخط ، استخدم عائلة عائلة الخط. من الصعب جدًا أن تفهم بشكل لا لبس فيه ما إذا كان هناك خط معين على الكمبيوتر الشخصي لقارئ المورد الخاص بك ، فمن الأفضل إدخال جميع الخيارات من نفس النوع. في هذه الحالة ، سيختار متصفح الويب متصفحًا موجودًا في نظام المستخدم.
هذه العائلة لها عدد من المعاني. على سبيل المثال ، يتم تمثيل اسم العائلة باسم عائلة الخط. تحدد قيمة العائلة العامة خمس مجموعات الخطوط الرئيسية.
عائلة نمط الخط مسؤولة عن اختيار النمط.هذا النمط موروث مثل النمط السابق. من بين القيم ، هناك نمط منتظم أو مائل ومائل. نمط الخط المتغير مسؤول عن الأحرف الكبيرة الصغيرة. للتشبع استخدم وزن الخط ، إلخ. يمكن تعيين حجم الخط ولونه.
بالإضافة إلى الخطوط القياسية ، يمكنك استخدامهاحلول غير قياسية. عادة ما تكون أكثر تميزًا ، وعلى الأرجح ، لن تلاحظها على مواقع المنافسين. ليس عليك استخدام الصور وجافا سكريبت والفلاش لهذا الغرض. سيكون كافياً أن تأخذ قاعدة @ font-face. يسمح للمستخدم بتحميل ملف خارجي في مستند.
تسمح لك هذه الطريقة بتوصيل خط CSSOTF و TTF. هذه تنسيقات خاصة تقوم بعمل جيد لمثل هذه المهام. يمكن أن تحدث المشكلات فقط مع Internet Explorer. على الرغم من حقيقة أنه بدأ استخدام خطوط الجهات الخارجية لأول مرة في عام 1997 ، إلا أنه لديه الآن متطلبات صارمة.
يفعل الكثير لتدمير عملك. غالبًا ما يمكنه ضغط ملف بخط ، وفي بعض الأحيان يمكنه تشفيره. لذلك ، تحدث أنواع مختلفة من الاختراق.
الآن هناك العديد من تنسيقات الخطوطبحاجة إلى معرفة. خلاف ذلك ، سوف تواجه عددًا من التناقضات وعدم التوافق. يمكنك توصيل خط CSS TTF. هذا التنسيق مدعوم الآن من قبل جميع متصفحات الويب. قد يكون الاستثناء هو Internet Explorer الإصدار 8 وما يليه ، بالإضافة إلى Opera Mini 5.0-8.0.
يمكن لـ IE فقط العمل مع EOT.الوضع مع WOFF هو نفسه مع TTF. لكن SVG تعمل في متصفحات Chrome حتى الإصدار 37 ، بالإضافة إلى Safari و iOS Safari و Android Browser. كما تظهر الممارسة ، من الأفضل استخدام TTF. هذا هو الخيار الأكثر تنوعا ونادرا ما يسبب مشاكل. هو الأكثر شيوعًا.
لذا ، لربط خط أحدمن التنسيقات أعلاه ، يكفي استخدام قاعدة @ font-face ، التي تحدثنا عنها سابقًا. لتوضيح الأمر ، تحتاج إلى اتباع خوارزمية معينة. لديك ملف خط font.ttf. لاستخدامه في النص الرئيسي ، تحتاج أولاً إلى نسخ الملف نفسه في المجلد حيث توجد جميع ملفات الموقع.
إذا كنت ترغب في استخدام أكثر من خط ، يمكنك إنشاء مجلد خاص هنا يمكنك تحميله فيه. لذلك سيكون من الأسهل عليك العثور عليها وتغيير محتويات هذا المجلد.
الآن نحن بحاجة لجعل المتصفح يقوم بتحميل خطنا من تلقاء نفسه. للقيام بذلك ، قدم له الإرشاد. نستخدم التوجيه @ font-face. سيبدو فريقنا كما يلي:
@ font-face {@ face-face {
عائلة الخط: MyUniqueFont؛
src: url ("fonts / font.ttf") ؛
}
أمر font-family مسؤول عن التأكد من أن الخطحصل على اسمه وبعد ذلك يمكن استخدامه في أسلوب الكتابة. يحتوي السطر الثاني على إشارة إلى المسار الذي يجب على المتصفح من خلاله العثور على النمط وتوصيله. هذا ليس عنوانًا عالميًا. اعتمادًا على مكان وضع ملف الخط ، سيختلف هذا المسار أيضًا. سيوضح لك هذا كيفية تضمين خط CSS من مجلد.
إذا كنت لا تعرف كيفية توصيل عدةخطوط CSS ، هناك أيضًا تعليمات حول ذلك. يسمح لك بتحديد ملفات متعددة في وقت واحد. على سبيل المثال ، يمكن توصيلهم بعشرات. للقيام بذلك ، يجب عليك استخدام قاعدة @ font-face أعلاه. باتباع مثال لكيفية توصيل ملف واحد مسبقًا من مجلد ، بنفس الطريقة حدد روابط لخيارات الخط الأخرى من سطر جديد.
إذا كان موقعك يعتمد على WordPress ،ربط الأنماط أسهل. عندما تحتاج إلى استبدال العنوان ، ما عليك سوى تسجيل الدخول إلى لوحة المشرف. هناك ، ابحث عن "إعدادات السمة". في قسم "الطباعة" ستكون قائمة بالخيارات المختلفة. ما عليك سوى تحديد التغيير وحفظه.
في كثير من الأحيان لربط الخطوط استخدامخطوط جوجل هذه أداة شائعة لتحديد الأنماط وربطها. هناك عدد كبير من مجموعات الخطوط. لربطهم ، ما عليك سوى الانتقال إلى الموقع الرسمي.
سترى قائمة كاملة مع أمثلة وفرصة التجربة. بعد إضافة النمط المطلوب ، لا تنس تحديد الأبجدية السيريلية إذا كان المورد الخاص بك باللغة الروسية. ثم سيكون من الممكن اختيار الحجم أو النمط أو تحديد العديد من الخيارات على الفور لجميع المناسبات.
بعد أن تكون قد أعددت الرمز الذي تحتاجهتم الضبط على ملف CSS. في هذه الحالة ، تنطبق قاعدة إضافة الطرق أيضًا. على سبيل المثال ، إذا تم تقديم أوراق الأنماط كمستند منفصل ، فإننا نرسل الأمر إلى السطر الأول. إذا كانت أوراق الأنماط موجودة مباشرةً في ملف HTML ، فأنت بحاجة إلى إضافتها إلى نص علامتي .
من السهل إضافة خطوط جديدة إلى موقعك.من المهم اتخاذ قرار فوري بشأن الأساليب والخيارات. اعتمادًا على النظام الذي يقع عليه موقعك ، تحتاج إلى التفكير في هذه الإجراءات. إذا كان لديك مورد مكتوب ذاتيًا ، فهناك خيارات قليلة في هذه الحالة. إذا ، على سبيل المثال ، على WordPress ، فإن هذه العملية أبسط بكثير مما قد تبدو.
