استخدام الخط هو جزء لا غنى عنه من تصميم الويب. في كثير من الأحيان ، نريد استخدام خط معين في صفحة ويب ، ولكن الخط ليس خطًا مدمجًا لأنظمة التشغيل السائدة ، بحيث لا يتمكن المستخدمون من رؤية التصميم الحقيقي عند تصفح الصفحة. الطريقة الأكثر شيوعًا لمصممي الفن هي جعل النص المطلوب في الصور . هناك بعض الطرق على الإنترنت التي تستخدم تقنية SIFR أو JavaScript/Flash Hack ، ولكن التنفيذ إما مرهقة أو معيبة. ما نريد التحدث عنه أدناه هو كيفية تضمين أي خط في صفحة ويب فقط من خلال سمة font-font of CSS.
الخطوة الأولى
احصل على تنسيقات الملفات الثلاثة لاستخدام الخط للتأكد من أنه يمكن عرض الخط بشكل طبيعي في المتصفحات السائدة.
.ttf أو .otf ، مناسبة لـ Firefox 3.5 ، Safari ، Opera
.eot ، لـ Internet Explorer 4.0+
.SVG ، مناسبة للكروم ، iPhone
ما نريد حله أدناه هو كيفية الحصول على ملفات التنسيق الثلاثة لخط معين. بشكل عام ، لدينا بعض ملفات التنسيق لهذا الخط في متناول اليد (أو موجود بالفعل في موقع موارد التصميم) ، أكثر ما يفيد هو ملف .ttf ، والذي نحتاج إلى تحويله إلى تنسيق الملف المتبقيين من خلال تنسيق الملف هذا. يمكن الحصول على تحويل تنسيقات ملفات الخط من خلال خدمة تحويل الخطوط عبر الإنترنت المقدمة من موقع FontSquirrel أو OnlineFontConverter. يوصى هنا الموقع الأول ، والذي يسمح لنا بتحديد الأحرف المطلوبة لإنشاء ملفات الخطوط (الخيار الأخير للخدمة) ، مما يقلل بشكل كبير من حجم ملفات الخط ويجعل هذا الحل أكثر عملية.
الخطوة 2
بعد الحصول على ملف الخط في ثلاثة تنسيقات ، فإن الخطوة التالية هي إعلان الخط في ورقة الأنماط واستخدام الخط الذي يلزم فيه.
إعلان الخط هو كما يلي:
@font-face {
Font-Family: 'fontnameregular' ؛
SRC: url ('fontname.eot') ؛
SRC: محلي ('fontname عادي') ،
محلي ('fontname') ،
تنسيق url ('fontname.woff') ('woff') ،
تنسيق url ('fontname.ttf') ('truetype') ،
url ('fontname.svg#fontname') تنسيق ('svg') ؛
}
/* حيث يتم استبدال fontname باسم الخط الخاص بك*/
استخدم هذا الخط حيث تحتاجه على الصفحة:
p {font: 13px fontnameregular ، arial ، sans-serif ؛
h1 {font-family: fontnameregular}
أو
<p style = "font-family: fontnameregular"> تحاضن القمر في يديك ، ورائحة الزهور الساقطة تملأ ملابسك </p>
فيما يلي مثال قمت به من خلال الخطوتين أعلاه:
قم بتشغيل مربع الرمز
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> الحل الكامل لتضمين أي خط في صفحات الويب - css9.net </title>
<link Rel = "STYLESHEET" href = "http://www.blueidea.com/articleimg/2009/12/7263/style.css"/>
<type type = "text/css">
@font-face {
Font-Family: 'Hakuyoxingshu7000regular' ؛
SRC: url ('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot') ؛
SRC: Local ('Hakuyoxingshu7000 praction') ، محلي ('hakuyoxingshu7000') ، url ('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') format ('truepe') ، url ('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') التنسيق ('Svg') ؛
}
#قصيدة{
حجم الخط: 45 بكسل ؛
Font-Family: hakuyoxingshu7000ment.
محاذاة النص: المركز ؛
}
#poem p {height: 30px ؛ line-height: 30px ؛}
</style>
</head>
<body>
<div id = "testDiv">
<h1> الحل الكامل لتضمين أي خط في صفحات الويب - CSS9.NET </h1>
<h2> الوصول إلى النص الأصلي: <a href = "http://css9.net/css-face-face-solution/" > & nbsp ؛ & nbsp ؛ & nbsp ؛ اتبع التطوير الأمامي على الويب- <a href = "http://css9.net"> css9.net </a> </h2>
<div id = "Poem">
<H3> السحابة هي نباتي </h3>
<p> هناك زملاء في العاصمة ، ونلتقي في الجناح النباتي. </p> <p> لا يزال المستمع لم ينته بعد ، لكن الشخص الذي يتحدث بالفعل تحدث كثيرًا. </p> <p> هناك أصدقاء في جميع أنحاء الغرفة ، وسأتحدث عن العلوم المدنية. </p> <p> أرسل كلمات صغيرة في Zen ، كن حذرًا ولطيفًا. </p>
</div>
</body>
</html>
[Ctrl+A جميع نصائح التحديد: يمكنك تعديل بعض التعليمات البرمجية أولاً ، ثم اضغط على Run]
يستخدم الخط في المقالة أعلاه خطًا نصًا للنافورة الذي نشره هذه المدونة.
قم بتنزيل رمز المصدر لهذا المثال: مثال Font Page Font
النص الأصلي: http://css9.net/css-font-face-solution/