خط Google لا يعمل على Safari

StackOverflow https://stackoverflow.com//questions/24061808

  •  26-12-2019
  •  | 
  •  

سؤال

أنا أعمل على جعل موقعي يبدو بنفس الشكل ضمن Safari وChrome.في Chrome يبدو تمامًا كما أريده.المشكلة الرئيسية هي أنه لا يبدو أن Google Font يتم تحميله ضمن Safari.نظرًا لأنني أستخدم الرمز الدقيق الموجود على موقع Google Font، لا أستطيع أن أفهم سبب عدم جلب Safari له.هل هو غير متوافق مع Safari ويجب علي الاعتماد على خط احتياطي؟

يمكن العثور على الموقع هنا

هل كانت مفيدة؟

المحلول

لبعض الأسباب الغريبة لدي تجربة هذا على بعض الخطوط الويب من Google ... عندما حدث ذلك، عادة ما أحصل عليها على الخادم و / أو تحويلها في Fontsquirrel .... Safariيجب أن تكون قادرة على أخذ ملفات TTF بغض النظر عن النسخة:

href="http://www.fontsquirrel.com/fonts/nunito" rel="noreferrer"> nunito ttf ver

نصائح أخرى

يجب ألا تحتوي CSS الخاصة بك فقط

giveacodicetagpre.

يجب أن يكون لها قيم لأسلوب الخط وخط الوزن:

giveacodicetagpre.

في حال كنت تستخدم خط يحتوي على القيم هذه مثل على سبيل المثال: https://fonts.googleapis.com/css؟family=source+sans+ برو: 900 دولية

إذا كنت تستخدم @استيراد مدونة في css مثل هذا

enter image description here

حذفها واستخدام الرابط في رئيس الوسم

enter image description here

تحديث 2018

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

إذا لم نقم بتخصيص عنوان URL لطلب هذا الخط من Google، فستبدو علامة الارتباط الخاصة بنا كما يلي:

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

دعونا نلقي نظرة على ما هو موجود داخل عنوان URL المطلوب.سيحتوي على العديد من قواعد وجه الخط التي تبدو كالتالي:

/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

لاحظ ال font-weight يصف.تم تحديده كـ 400 وهو خط موزون "عادي".بعض المتصفحات قادرة على أخذ هذا الخط وتحويله إلى خط غامق ولا يزال يبدو لائقًا في منتصف الطريق.هذا يسمي "جريئة زائفة".لن يبدو أبدًا جيدًا مثل الخط الغامق المصنوع يدويًا.وفي بعض المتصفحات، ولا سيما متصفح Safari على الأجهزة المحمولة، سوف يتعطل البرنامج وسيبدو سيئًا.

العلاج هو طلب وتحديد متغيرات وزن الخط الفعلي الذي تريد استخدامه.في حالتي يبدو مثل هذا:

Screenshot from Google Web Fonts

سيؤدي هذا إلى إنتاج علامة الارتباط التالية:

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&amp;subset=latin-ext" rel="stylesheet">

إذا نظرت إلى محتويات عنوان URL هذا، فستجد أن هناك الآن إدخالات لقواعد وجه الخط font-weight: 700 هناك.

الآن، إذا كنت أرغب في استخدام الإصدار الغامق من هذا الخط لعلامات h1 الخاصة بي، فسأستخدم CSS التالي.

h1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
}

ستقوم معظم المتصفحات تلقائيًا بتعيين h1 كـ font-weight: bold.إذا كنت أرغب في الاستفادة من هذا الإعداد الافتراضي، فيجب علي توفير قواعد وجه الخط الخاصة بي.يمكنني القيام بذلك ببساطة عن طريق تكرار قواعد وجه الخط التي توفرها Google، والتبادل font-face: 700 ل font-face: bold ووضع تلك القواعد المتغيرة في ملف CSS الخاص بي.

لذلك هذه القاعدة:

/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

سيصبح هذا:

/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: bold;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

الآن علامات h1 مع font-family: 'Source Sans Pro' سيتم استخدام متغير الخط الصحيح.إذا كنت تريد قراءة أكثر تعمقًا، فراجع عام 2012 مقالة قائمة وبصرف النظر.

حالتي كانت أنني استخدمت اسم الخط دون علامات اقتباس.لذلك فقط تغيير

giveacodicetagpre.

إلى

giveacodicetagpre.

Chrome يعمل تماما دون اقتباسات، ولكن رحلات السفاري لا.

كانت لدي حالة حيث لم يظهر Google Webfont (Londrina) في Safari (لنظام التشغيل Windows)، لأنني استخدمت text-rendering: optimizeLegibility;.بعد إزالة ذلك، كان على ما يرام.

مثال: http://codepen.io/julia-r/pen/gagbdy

على الرغم من أن هذا سؤال قديم اعتقدت أنني سأضيف حلاي (لقد وجدت في مكان آخر) لمساعدة الآخرين.

عندما تعلن خطوطك في CSS، أضف "!" مهم "في النهاية.مسح مشكلتي.

giveacodicetagpre.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top