كيفية الكشف عن أي واحد من تعريف الخط المستخدم في صفحة ويب ؟

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

  •  08-06-2019
  •  | 
  •  

سؤال

لنفترض أن لدى التالية CSS في الصفحة الخاصة بي:

body {
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

كيف يمكن اكتشاف أي واحد من تعريف الخطوط المستخدمة في متصفح المستخدم?

تحرير الناس يتساءل لماذا أريد أن أفعل هذا: الخط انا كشف يحتوي على glyph التي لا تتوفر في غيرها من الخطوط و عندما لا يكون لدى المستخدم الخط كنت ترغب في عرض الرابط يطلب من المستخدم إلى تحميل هذا الخط حتى يتمكنوا من استخدام تطبيق ويب مع الخط الصحيح.

انا حاليا في عرض تحميل رابط الخط لجميع المستخدمين ، أريد فقط عرض هذا بالنسبة للأشخاص الذين ليس لديهم الخط الصحيح مثبتا.

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

المحلول

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

هنا حيث جاء:جافا سكريبت/CSS الخط كاشف (ajaxian.com;12 Mar 2007)

نصائح أخرى

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

jFont مدقق على جيثب

@بات في الواقع, سفاري لا يعطي الخط المستخدم, سفاري بدلا يعود دائما أول الخط في كومة بغض النظر عن ما إذا كان مثبتا على الأقل في تجربتي.

font-family: "my fake font", helvetica, san-serif;

على افتراض هلفتيكا هو تثبيت/تستخدم ، سوف تحصل على:

  • "بلدي وهمية الخط" في سفاري (وأعتقد غيرها من المتصفحات بكت).
  • "بلدي وهمية الخط, هلفتيكا, سان-serif" في أبو بريص المتصفحات IE.
  • "هلفتيكا" في أوبرا 9 ، على الرغم من أنني قرأت أن يتم تغيير هذا في أوبرا 10 إلى المباراة أبو بريص.

أخذت تمر في هذه المشكلة وخلق الخط Unstack, التي الاختبارات كل خط في كومة ويعود أول تثبيت واحد فقط.فإنه يستخدم خدعة @MojoFilter يذكر, ولكن فقط بإرجاع أول واحد إذا متعددة مثبتة.على الرغم من أنها لا تعاني من ضعف @tlrobinson يذكر (ويندوز بديلا Arial عن هلفتيكا بصمت التقرير أن هلفتيكا تثبيت) ، وإلا يعمل بشكل جيد.

شكل مبسط هو:

function getFont() {
    return document.getElementById('header').style.font;
}

إذا كنت بحاجة إلى شيء أكثر اكتمالا ، تحقق هذا للخروج.

أسلوب الذي يعمل هو أن ننظر إلى نمط محسوب من عنصر.وهذا معتمد في أوبرا و فايرفوكس (وأنا ريكون في سفاري ، ولكن لم تختبر).أي (7 على الأقل) ، توفر طريقة للحصول على نمط ، ولكن يبدو أن كل ما كان في الأنماط ، وليس نمط محسوب.المزيد من التفاصيل على quirksmode: الحصول على أنماط

وهنا وظيفة بسيطة للاستيلاء على الخط المستخدم في عنصر:

/**
 * Get the font used for a given element
 * @argument {HTMLElement} the element to check font for
 * @returns {string} The name of the used font or null if font could not be detected
 */
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;
    }
}

إذا CSS القاعدة في هذا:

#fonttester {
    font-family: sans-serif, arial, helvetica;
}

ثم يجب العودة هلفتيكا إذا المثبتة, إن لم يكن, arial, وأخيرا, اسم النظام الافتراضي sans-serif الخط.لاحظ أن ترتيب الخطوط في CSS إعلان مهم.

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

آخر حل هو تثبيت الخط تلقائيا عن طريق @font-face والتي قد ينفي الحاجة إلى الكشف.

@font-face { 
font-family: "Calibri"; 
src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
}

بالطبع ذلك لن يحل أي قضايا حق المؤلف ومع ذلك يمكن دائما استخدام مجانية الخط أو حتى جعل الخط الخاص بك.سوف تحتاج على حد سواء .eot & .ttf الملفات تعمل بشكل أفضل.

هناك حل بسيط - مجرد استخدام element.style.font:

function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}

هذه الوظيفة سوف تفعل بالضبط ما تريد.على التنفيذ فإنه سيعود نوع الخط المستخدم/المتصفح.نأمل أن يكون هذا سوف يساعد.

Calibri هو الخط مملوكة من قبل مايكروسوفت ، و لا يتم توزيعها مجانا.كما تتطلب من المستخدم لتحميل الخط محددة ليست سهلة الاستعمال جدا.

أود أن أقترح شراء ترخيص الخط و تضمينها في التطبيق الخاص بك.

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

https://fount.artequalswork.com/

يمكنك استخدام هذا الموقع :

http://website-font-analyzer.com/

يفعل بالضبط ما تريد...

يمكنك وضع أدوبي فارغة في font-family بعد الخط الذي تريد أن ترى ، ثم أي رموزا في هذا الخط لن تكون المقدمة.

على سبيل المثال:

font-family: Arial, 'Adobe Blank';

بقدر ما أنا على علم لا يوجد شبيبة طريقة لمعرفة أي رموزا في عنصر يتم تقديمها من خلال الخط في الخط كومة لهذا العنصر.

هذا معقد بسبب حقيقة أن المتصفحات المستخدم إعدادات الرقيق/sans-serif/معدل النصوص والشروط الخطوط لديهم أيضا بهم الثابت تلوينها الرجوع إلى الخطوط التي سوف يستخدمونها إذا كانت الصورة الرمزية لم يتم العثور على في أي من الخطوط في خط المكدس. حتى المتصفح قد تجعل بعض الرموز في الخط في الخط كومة أو متصفح المستخدم في إعداد خط. Chrome Dev الأدوات التي سوف تظهر لك كل أصدرت الخط رموزا في العنصر المحدد.لذا على الجهاز الخاص بك يمكنك أن ترى ما تفعله و لكن ليس هناك طريقة لمعرفة ما يحدث على جهاز المستخدم.

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

لذا...

بالنسبة رموزا كنت مهتما في, لديك أي وسيلة لمعرفة ما إذا كانت سوف تكون المقدمة من قبل المستخدم المتصفح/النظام الاحتياطي ، حتى لو لم يكن الخط الذي تحدده.

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

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