Printable View
سلام. من میخوام مثلا از فونت BNazanin استفاده کنم توی وبسایتم ولی این فونت یکم کوچیکه، مثلا 17 پیکسلش میشه 11 پیکسله Tahoma، چه شکلی میشه بگم اگه کاربر فونت رو داشت 17 پیکسل (مثلا) باشه و اگر نداشت 11؟ ممنون میشم کمک کنید. (البته میخوام از CSS استفاده کنم)
پیشنهاد می کنم از [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] استفاده کنی تا دیگه قصه اینکه کاربر این فونت رو داره یا نه رو نداشته باشی.
ممنون اما آخه یه فونته دیگه هم لود کردم، میترسم دوتا فونت بشه سنگین شه.
بستگی به حجم فونت‌ها داره. اگه حداکثر تا ۱۰۰ کیلوبایت باشن مشکلی نیست.
البته با سایت‌هایی که سرعت بالا اومدن سایت رو اندازه گیری می کنند هم میشه تشخیص داد که صفحه کند می شه یا نه.
در ضمن شاید با جاوا اسکریپت بشه نوع فونت رو چک کرد و مثلا اگه BNazanin بود اندازه فونت رو زیاد کرد.
نمی دونم شاید اندازه‌های نسبی مثل large, em یا درصد هم مفید باشن.
از طریق این کد میتونید چک کنید ببینید فونت مورد نظرتون نصب هست یا نه:
کد:function detectFont(name) {
name = name.replace(/['"<>]/g,'');
var body = document.body,
test = document.createElement('div'),
installed = false,
template =
'<b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',sans-serif !important">ii</b>'+
'<b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',monospace !important">ii</b>',
ab;
if (name) {
test.innerHTML = template.replace(/X/g, name);
test.style.cssText = 'position: absolute; visibility: hidden; display: block !important';
body.insertBefore(test, body.firstChild);
ab = test.getElementsByTagName('b');
installed = ab[0].offsetWidth === ab[1].offsetWidth;
body.removeChild(test);
}
return installed;
}
console.log(detectFont('B Nazanin') ? 'Installed' : 'Not installed');
ممنون. فقط یه مشکلی دارم باهاش. الان تو این کد گذاشتمش کار نکرد:
و توی کنسول هم این ارور رو میده:کد:<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script>
function detectFont(name) {
name = name.replace(/['"<>]/g,'');
var body = document.getElementsByTagName('body'),
test = document.createElement('div'),
installed = false,
template =
'<b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',sans-serif !important">ii</b>'+
'<b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',monospace !important">ii</b>',
ab;
if (name) {
test.innerHTML = template.replace(/X/g, name);
test.style.cssText = 'position: absolute; visibility: hidden; display: block !important';
body.insertBefore(test, body.firstChild);
ab = test.getElementsByTagName('b');
installed = ab[0].offsetWidth === ab[1].offsetWidth;
body.removeChild(test);
}
return installed;
}
/*if (detectFont('B Nazanin')) {
document.getElementById('s').style.cssText='font-family:B Nazanin, Tahoma;';
} else {
document.getElementById('s').style.cssText='font-family:Tahoma;';
}*/
console.log(detectFont('B Nazanin') ? 'Installed' : 'Not installed');
</script>
</head>
<body>
<span id="s">fdgfdg - سیلالم</span>
</body>
</html>
[20:07:19.755] TypeError: body.insertBefore is not a function @ file:///C:/Users/Mahdi/Desktop/test.html:19
تو رویداد onload صفحه باید فراخوانی بشه:
کد:window.onload = function() {
if (detectFont('B Nazanin')) {
document.getElementById('s').style.cssText='font-family:B Nazanin, Tahoma;';
} else {
document.getElementById('s').style.cssText='font-family:Tahoma;';
}
//console.log(detectFont('B Nazanin') ? 'Installed' : 'Not installed');
}
دوست عزیز نیاز به جاوا اسکریپت نیست
شما هرجا که فونت فامیلیتونو نازنین گذاشتی خصوصیت سایزو ایمپورتنت کنید
مثل زیر
من خودم معمولاً بادی رو تاهوما کار میکنم بعد جاهای خاصو وب فونت استفاده میکنم.کد:Font-family:bnazanin , tahoma;font-size:17px !important;
موفق باشید:40: