it-swarm.asia

كيفية إضافة بعض الخطوط غير القياسية إلى موقع على شبكة الإنترنت؟

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

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

484
vaske

يمكن القيام بذلك عبر CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

إنه مدعوم لجميع المتصفحات العادية إذا كنت تستخدم خطوط تروتايب (TTF) أو تنسيق خط Open Web (WOFF).

472
hangy

يمكنك إضافة بعض الخطوط عبر خطوط الويب من Google .

من الناحية الفنية ، يتم استضافة الخطوط في Google وتقوم بربطها في رأس HTML. بعد ذلك ، يمكنك استخدامها بحرية في CSS مع @font-face ( اقرأ عنها ).

فمثلا:

في قسم <head>:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

ثم في CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

يبدو الحل موثوقًا للغاية (حتى تستخدمه Smashing Magazine لعنوان مقال. ). ومع ذلك ، لا يوجد الكثير من الخطوط المتاحة حتى الآن في دليل خطوط Google .

113
Michał Pękała

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

ألقِ نظرة على الجدول التالي:

enter image description here

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

محاليل:

1 - التوافق الكامل للمتصفح

هذه هي الطريقة مع أعمق دعم ممكن الآن:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 - معظم المتصفح

الأمور تتحول بشدة نحو WOFF على الرغم من ذلك ، ربما يمكنك الابتعاد عن:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - أحدث المتصفحات فقط

أو حتى مجرد الصوف.
يمكنك بعد ذلك استخدامه مثل هذا:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

المراجع والقراءة الإضافية:

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

70
Javier Cadiz

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

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

لذلك سوف تحتاج فقط كل من خطوط ttf و eot. يمكن لبعض الأدوات المتاحة على الإنترنت إجراء التحويل.

ولكن إذا كنت ترغب في إرفاق الخط بتنسيق غير قياسي (الصور النقطية ، إلخ) ، لا أستطيع مساعدتك.

16
BiAiB

لقد وجدت أن أسهل طريقة للحصول على خطوط غير قياسية على موقع الويب هي استخدامsIFR

إنه ينطوي على استخدام كائن Flash يحتوي على الخط ، ولكنه يتحلل بشكل جيد إلى نص/خط قياسي إذا لم يتم تثبيت Flash.

يتم تعيين النمط في CSS الخاص بك ، وجافا سكريبت إعداد بديل فلاش للنص الخاص بك.

تحرير: (ما زلت أوصي باستخدام الصور لخطوط غير قياسية لأن sIFR يضيف وقتًا إلى مشروع وقد يتطلب صيانة).

11
Matt

تقول المقالةواجهة الخط في IE: جعل خطوط الويب تعملتقول إنها تعمل مع جميع المتصفحات الرئيسية الثلاثة.

إليكم عينة حصلت عليها: http://brendanjerwin.com/test_font.html

المزيد من المناقشة فيتضمين الخطوط.

10
brendanjerwin

Typeface.js و Cufon هما خياران آخران للاهتمام. هذه هي مكونات JavaScript التي تعرض بيانات الخطوط الخاصة بتنسيق JSON (والتي يمكنك تحويلها من TrueType أو OpenType التنسيقات على مواقع الويب الخاصة بهم) عبر عنصر <canvas> الجديد في جميع المتصفحات الجديدة باستثناء Internet Explorer و عبر VML في برنامج Internet Explorer.

المشكلة الرئيسية مع كليهما (حتى الآن) هي أن اختيار النص لا يعمل أو على الأقل يعمل بشكل محرج.

لا يزال ، هو لطيف جدا للعناوين. النص الأساسي ... لا أعرف.

وهو سريع بشكل مدهش.

10
Thomas

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

8
Casper

هل هناك طريقة لإضافة بعض الخط المخصص على موقع الويب دون استخدام ... Flash؟

بالتأكيد ، استخدم Silverlight .

5
TraumaPony

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

4
Steve Moyer

يدعم كل من Safari و Internet Explorer قاعدة CSS @ font-face ، إلا أنهما يدعمان نوعين مختلفين من الخطوط المدمجة. يخطط Firefox لدعم نفس نوع Apple في وقت قريب. يمكن لـ SVG تضمين الخطوط ولكن ليس هذا مدعومًا على نطاق واسع حتى الآن (بدون مكون إضافي).

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

4
zobier

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

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

ثم الرسم باستخدام هذا الخط على Graphics.

4
mattlant

من الممكن أيضًا استخدام خطوط WOFF - مثال هنا

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
3
Wilf

ما عليك سوى تقديم الرابط إلى الخط الفعلي مثل هذا وستكون على ما يرام

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
3
Abhijeet Kumar

يبدو أنه يعمل فقط في Internet Explorer ، ولكن البحث السريع في Google عن "خطوط تضمين HTML" يؤدي إلى http://www.spoono.com/html/tutorials/tutorial.php؟id=19

إذا كنت ترغب في البقاء بلا علم بالنظام الأساسي (ويجب عليك!) ، فسيتعين عليك استخدام الصور ، وإلا عليك فقط استخدام خط قياسي.

3
James Muscat

فعلت القليل من البحث وحفرتاستبدال النص الديناميكي(نشرت 2004-06-15).

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

يحتوي على بعض القيود ، لكنه ربما يكون أحد الخيارات الأسهل (وأكثر توافقًا مع المتصفح) من باقي الخيارات التي رأيتها.

3
Kent Fredric

Typeface.js JavaScript Way:

باستخدام typeface.js ، يمكنك تضمين خطوط مخصصة في صفحات الويب الخاصة بك حتى لا تضطر إلى تقديم نص إلى الصور

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

http://typeface.neocracy.org/

2
bakkal

أصدر Monotype مؤخرًا الكثير من الخطوط مع نظام جديد لاستخدامها على صفحات الويب الخاصة بك: http://www.webfonts.fonts.com/

2
Cogwheel

راجع المقالة50 أدوات تصميم مفيدة لطباعة الويب الجميلةللحصول على طرق بديلة.

لقد استخدمت فقط Cufon . لقد وجدت أنها موثوقة وسهلة الاستخدام للغاية ، لذلك أنا تمسك بها.

2
Blair

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

لهذا الغرض ، أستخدم مولد الخط مثل Fontsquirrel وهو يوفر جميع تنسيقات الخطوط & CSS @ font-face @ ، ستحتاج فقط إلى السحب والإفلات فقط في ملف CSS الخاص بك.

2
saadeez

أخشى أن الرسومات هي خيارك الوحيد في هذه الحالة.

1
Ed Brown