بما في ذلك الخطوط المخصصة باستخدام .ttf وCSS

أنت تريد دمج خط .ttf في صفحة الويب الخاصة بك ولكنك تواجه صعوبات. دعنا نفحص الكود الخاص بك:

@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

أين المشكلة؟

إن تضمين ملف .ttf فقط غير كافٍ للتوافق عبر المتصفحات. لتغطية مجموعة واسعة من المتصفحات، تحتاج إلى تنسيقات خطوط متعددة.

الحل الشامل:

@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 */
}

يفترض هذا الرمز أن لديك تنسيقات ‎.eot و.woff و.ttf وSVG لخط الويب الخاص بك. يمكن لمولدات خطوط الويب مثل Font Squirrel أو Transfonter أتمتة هذه العملية.

النهج الحديث:

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

@font-face { عائلة الخط: 'MyWebFont'؛ src: تنسيق url('myfont.woff')('woff')، /* Chrome 6، Firefox 3.6، IE 9، Safari 5.1 */ url('myfont.ttf') تنسيق('truetype'); /* كروم 4، فايرفوكس 3.5، أوبرا 10، سفاري 3—5 */

@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 */
}

موارد إضافية:

حيل CSS: استخدام @font-face: https://css-tricks.com/snippets/css/using- Font-face/

• هل يمكنني استخدام Fontface: https://caniuse.com/fontface