كيفية تضمين الخطوط في HTML ؟

https://stackoverflow.com/questions/220236

03-07-2019
|

سؤال

أنا في محاولة لمعرفة حل لائق (خاصة من جانب كبار المسئولين الاقتصاديين) على تضمين الخطوط في صفحات الويب.حتى الآن لقد رأيت W3C الحل, الذي لا يعمل على فايرفوكس ، هذا رائع الحل.الحل الثاني هو في العناوين فقط.هل هناك حل المتاحة عن كامل النص ؟ أنا تعبت من الخطوط القياسية لصفحات ويب.

وذلك بفضل!

المحلول

تغيرت الأمور لأن هذا السؤال كان في الأصل طلب الرد.كان هناك كمية كبيرة من العمل المنجز على الحصول على عبر متصفح تضمين الخط للنص الجسم على العمل باستخدام @الخط وجه التضمين.

بول الايرلندي وضع معا الرصاص @الخط وجه الجملة الجمع بين محاولات من عدة أشخاص آخرين.إذا كنت تذهب في الواقع من خلال المقال بأكمله (وليس فقط الجزء العلوي) فإنه يسمح واحدة @الخط وجه البيان لتغطية IE, Firefox, Safari, Opera, Chrome وربما آخرين.أساسا هذا يمكن أن تغذي بها OTF, EOT, SVG WOFF في الطرق التي لا كسر أي شيء.

مقصوص من مقالته:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

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

سوما التصميم أيضا وضع معا FontFriend المختصر, الذي يعيد الخطوط على صفحة على الطاير لذلك يمكنك أن تجرب الأمور.ويشمل قم بسحب وإسقاط @font-face الدعم في فايرفوكس 3.6+.

في الآونة الأخيرة, وقد بدأت جوجل في توفير Google ويب الخطوط, ومجموعة من الخطوط متوفرة تحت رخصة مفتوحة المصدر و من خوادم Google.

قيود الترخيص

أخيرا ، WebFonts.info وضعت معا لطيفة ويكي ان قائمة الخطوط المتاحة @الخط وجه التضمين استنادا إلى التراخيص.فإنه لا يدعي أن يكون قائمة شاملة ، ولكن الخطوط على أنه ينبغي أن تكون متاحة (ربما مع ظروف مثل الإسناد في ملف CSS) لتضمين/ربط. من المهم قراءة التراخيص, لأن هناك بعض القيود التي لا يدفع إلى الأمام الواضح على تنزيل الخط.

نصائح أخرى

Facetype.js ، يمكنك تحويل الخاص بك. الخط TTF في ملف جافا سكريبت. SEO متوافقة بالكامل، ويدعم FF، IE6 وسفاري ويحط برشاقة على المتصفحات الأخرى.

لا, ليس هناك حل لائق على نوع الجسم, إلا إذا كنت على استعداد لتلبية فقط لأولئك مع نزيف الحافة المتصفحات.

مايكروسوفت لحمة, الملكية الخاصة font-دمج التكنولوجيا ، ولكن لم أسمع ذلك تحدثت عنها في سنوات وأنا لا أعرف الشخص الذي يستخدمها.

احصل على مع تقنية sIFR لعرض نوع (عناوين عناوين التدوينات, الخ.) واستخدام واحدة من أقل البالية الخطوط الويب الآمنة على نوع الجسم (مثل Trebuchet MS).إذا كنت بالملل مع جميع الخطوط الويب الآمنة ، ربما أنت على تعريف مصطلح ضيق للغاية — أنظر هذه المصفوفة من الأسهم الخطوط أن السفينة مع انظمة التشغيل الرئيسية و هي احتمالات كنت سوف تكون قادرة على العثور على الخط شلال من شأنها أن قبض ما يقرب من جميع المستخدمين على شبكة الإنترنت.

على سبيل المثال: font-family: "Lucida Grande", "Verdana", sans-serif هو الخط المشترك تتالي;OS X يأتي مع Lucida Grande, ولكن تلك مع ويندوز سوف تحصل على Verdana, على شبكة الإنترنت آمنة الخط مع رسائل مشابهة من حيث الحجم والشكل Lucida Grande.لينكس للمستخدمين أيضا الحصول على Verdana إذا قمت بتثبيت الخطوط الويب الآمنة حزمة موجود في معظم توزيعات' حزمة المديرين أو آخر أنها سوف تقع مرة أخرى عادية بلا الرقيق.

وأنه من غير المرجح أيضا. EOT إلى حد ما التقييدية تنسيق معتمد فقط من قبل أي.سواء سفاري 3.1 و فايرفوكس 3.1 (حسنا الحالي ألفا) وربما Opera 9.6 دعم true type font (ttf) التضمين ، على الأقل سفاري يدعم SVG الخطوط من خلال نفس الآلية.قائمة على حدة المناقشات جيدة حول هذا الوقت مرة أخرى.

تحقق من Typekit, التجاري الخيار (لديهم حزمة مجانية متاحة أيضا).

فإنه يستخدم تقنيات مختلفة اعتمادا على المتصفح الذي يستخدم (@font-face مقابل EOT شكل) ، وأنها تأخذ الرعاية من كل الخط قضايا الترخيص بالنسبة لك أيضا.وهو يدعم كل شيء وصولا إلى IE6.

هنا بعض مزيد من المعلومات حول كيفية Typekit يعمل:

في حين يعود . الجواب هو في الأساس أنه لا يعمل. : (

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow