كيفية إضافة بعض الخطوط غير القياسية إلى موقع على شبكة الإنترنت؟
https://stackoverflow.com/questions/107936
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
هل هناك طريقة لإضافة بعض الخطوط المخصصة على موقع الويب دون استخدام الصور، فلاش أو بعض الرسومات الأخرى؟
على سبيل المثال، كنت أعمل في بعض مواقع حفلات الزفاف، وكنت أجد الكثير من الخطوط الرائعة لهذا الموضوع، لكن لم أتمكن من العثور على الطريقة الصحيحة لإضافة هذا الخط على الخادم، وكيف يمكنني تضمين هذا الخط مع CSS في HTML؟هل من الممكن القيام بذلك بدون رسومات؟
المحلول
ويمكن القيام بذلك عبر 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>
إنها مدعوم لجميع المتصفحات العادية إذا كنت تستخدم خطوط TrueType (TTF) أو تنسيق Web Open Font (WOFF).
نصائح أخرى
يمكنك إضافة بعض الخطوط عبر خطوط الويب جوجل.
من الناحية الفنية، تتم استضافة الخطوط في 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 لعنوان المقالة.).ومع ذلك، لا يوجد الكثير من الخطوط المتوفرة حتى الآن دليل خطوط جوجل.
الطريقة التي يجب اتباعها هي استخدام إعلان @font-face CSS الذي يسمح للمؤلفين بتحديد الخطوط عبر الإنترنت لعرض النص على صفحات الويب الخاصة بهم.من خلال السماح للمؤلفين بتوفير الخطوط الخاصة بهم، يلغي @font-face الحاجة إلى الاعتماد على العدد المحدود من الخطوط التي قام المستخدمون بتثبيتها على أجهزة الكمبيوتر الخاصة بهم.
ألقِ نظرة على الجدول التالي:
كما ترون، هناك العديد من التنسيقات التي تحتاج إلى معرفتها بشكل أساسي بسبب التوافق عبر المتصفحات.السيناريو في الأجهزة المحمولة لا يختلف كثيرًا.
حلول:
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 - أحدث المتصفحات فقط
أو حتى مجرد WOFF.
ثم تستخدمه مثل هذا:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
المراجع ومزيد من القراءة:
هذا هو ما تحتاج إلى معرفته بشكل أساسي حول تنفيذ هذه الميزة.إذا كنت ترغب في إجراء المزيد من البحث حول هذا الموضوع، فأنا أشجعك على إلقاء نظرة على الموارد التالية.معظم ما أضعه هنا مستخرج مما يلي
إذا كنت تقصد بالخط غير القياسي خطًا مخصصًا بتنسيق قياسي، فإليك كيفية القيام بذلك، وهو يعمل مع جميع المتصفحات التي قمت بفحصها حتى الآن:
@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.يمكن لبعض الأدوات المتاحة عبر الإنترنت إجراء التحويل.
ولكن إذا كنت تريد إرفاق خط بتنسيق غير قياسي (صور نقطية وما إلى ذلك)، فلا يمكنني مساعدتك.
لقد وجدت أن أسهل طريقة للحصول على خطوط غير قياسية على موقع ويب هي استخدامها سيفر
إنه يتضمن استخدام كائن Flash الذي يحتوي على الخط، ولكنه يتحلل بشكل جيد إلى النص/الخط القياسي إذا لم يتم تثبيت Flash.
يتم تعيين النمط في CSS الخاص بك، وتقوم JavaScript بإعداد بديل Flash للنص الخاص بك.
يحرر:(ما زلت أوصي باستخدام الصور للخطوط غير القياسية لأن sIFR يضيف وقتًا للمشروع ويمكن أن يتطلب الصيانة).
المقالة وجه الخط في IE:جعل خطوط الويب تعمل يقول أنه يعمل مع جميع المتصفحات الثلاثة الرئيسية.
هنا عينة حصلت على العمل: http://brendanjerwin.com/test_font.html
مزيد من المناقشة في تضمين الخطوط.
محرف.js و كوفون هناك خياران آخران مثيران للاهتمام.إنها مكونات JavaScript تعرض بيانات الخطوط الخاصة بتنسيق JSON (والتي يمكنك التحويل منها كتابه صحيحه أو النوع المفتوح التنسيقات على مواقع الويب الخاصة بهم) عبر عنصر <canvas> الجديد في جميع المتصفحات الأحدث باستثناء Internet Explorer وعبر VML في Internet Explorer.
المشكلة الرئيسية في كليهما (حتى الآن) هي أن تحديد النص لا يعمل أو على الأقل يعمل بشكل محرج تمامًا.
ومع ذلك، فهو لطيف جدًا للعناوين الرئيسية.نص الجسم...لا أعرف.
وهو سريع بشكل مدهش.
أو يمكنك المحاولة سيفر.أعلم أنه يستخدم Flash، ولكن فقط إذا كان متاحًا.إذا لم يكن Flash متاحًا، فإنه يعرض النص الأصلي بالخط الأصلي (CSS).
هل هناك طريقة لإضافة بعض الخطوط المخصصة على موقع الويب دون استخدام ...فلاش ؟
بالتأكيد، استخدم سيلفرلايت.
التقنية التي أوصى بها W3C للقيام بذلك تسمى "التضمين" وقد تم وصفها جيدًا في المقالات الثلاثة هنا: تضمين الخطوط.في تجاربي المحدودة، وجدت أن هذه العملية معرضة للأخطاء ولم أحقق سوى نجاحًا محدودًا في جعلها تعمل في بيئة متعددة المتصفحات.
يدعم كل من Safari وInternet Explorer قاعدة CSS @font-face، إلا أنهما يدعمان نوعين مختلفين من الخطوط المضمنة.يخطط Firefox لدعم نفس النوع الذي تدعمه Apple في وقت ما قريبًا.يمكن لـ SVG تضمين الخطوط ولكنها غير مدعومة على نطاق واسع حتى الآن (بدون مكون إضافي).
أعتقد أن الحل الأكثر قابلية للنقل الذي رأيته هو استخدام وظيفة JavaScript لاستبدال العناوين وما إلى ذلك.باستخدام صورة تم إنشاؤها وتخزينها مؤقتًا على الخادم باستخدام الخط الذي تختاره - وبهذه الطريقة يمكنك ببساطة تحديث النص ولا يتعين عليك استخدام Photoshop.
إذا كنت تستخدم ASP.NET، فمن السهل حقًا إنشاء خطوط تعتمد على الصور دون الحاجة إلى تثبيت الخطوط (كما هو الحال في الإضافة إلى قاعدة الخطوط المثبتة) على الخادم باستخدام:
PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];
ثم الرسم بهذا الخط على ملف Graphics.
يبدو أنه يعمل فقط في Internet Explorer، ولكن يؤدي البحث السريع في Google عن "خطوط تضمين html" إلى نتائجه http://www.spoono.com/html/tutorials/tutorial.php?id=19
إذا كنت تريد أن تظل مستقلاً عن النظام الأساسي (ويجب عليك ذلك!) فسيتعين عليك استخدام الصور، أو استخدم خطًا قياسيًا فقط.
لقد قمت ببعض البحث وحفرت استبدال النص الديناميكي (تم النشر بتاريخ 15/06/2004).
تستخدم هذه التقنية الصور، ولكن يبدو أنها "بدون استخدام اليدين".أنت تكتب النص الخاص بك، وتسمح لبعض البرامج النصية الآلية بإجراء البحث والاستبدال الآلي على الصفحة نيابةً عنك بسرعة.
يحتوي على بعض القيود، لكنه ربما يكون أحد الخيارات الأسهل (والأكثر توافقًا مع المتصفح) من كل الخيارات الأخرى التي رأيتها.
من الممكن أيضًا استخدام خطوط WOFF - مثال هنا
@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
}
ما عليك سوى توفير الرابط للخط الفعلي مثل هذا وستكون جاهزًا للمضي قدمًا
<!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>
طريقة جافا سكريبت Typeface.js:
باستخدام ayface.js ، يمكنك تضمين خطوط مخصصة في صفحات الويب الخاصة بك حتى لا تضطر إلى تقديم نص إلى الصور
بدلاً من إنشاء الصور أو استخدام Flash لمجرد إظهار نص الرسوم الرسمية لموقعك في الخط الذي تريده ، يمكنك استخدام Typeface.js والكتابة في HTML و CSS العادي ، تمامًا كما لو أن زوارك قد تم تثبيت الخط محليًا.
أصدرت Monotype مؤخرًا الكثير من الخطوط الخاصة بها بالإضافة إلى نظام جديد لاستخدامها على صفحات الويب الخاصة بك: http://www.webfonts.fonts.com/
انظر المقال 50 أداة تصميم مفيدة لطباعة الويب الجميلة للطرق البديلة.
لقد استخدمت فقط كوفون.لقد وجدت أنها موثوقة وسهلة الاستخدام للغاية، لذلك تمسكت بها.
إذا كان لديك ملف بالخط الخاص بك، فستحتاج إلى إضافة المزيد من تنسيقات هذا الخط للمتصفحات الأخرى.
لهذا الغرض أستخدم مولد الخطوط مثل السنجاب الخطوط فهو يوفر جميع تنسيقات الخطوط و@font-face CSS الخاص به، وسوف تحتاج فقط إلى سحبه وإفلاته في ملف CSS الخاص بك.
أخشى أن الرسومات هي خيارك الوحيد في هذه الحالة.
