ریختن فونت استفاده شده در سایت درون فولدر Font سیستم کاربر

[EbiPenMan]

سلام به همگی

من در سایتم از فونت های فارسی استفاده کردم و برام مهمه که همه بتونن سایتمو با همین فونت ها ببین.
آیا راهی هست که قبل از دیدن سایت بشه چک کرد که آیا کاربر این فونتا رو داره و اگه نداره تو فولدر Font سیستمش ریخت؟

[mehdi.mousavi]

سلام به همگی من در سایتم از فونت های فارسی استفاده کردم و برام مهمه که همه بتونن سایتمو با همین فونت ها ببین. آیا راهی هست که قبل از دیدن سایت بشه چک کرد که آیا کاربر این فونتا رو داره و اگه نداره تو فولدر Font سیستمش ریخت؟

سلام.
برای اینکار روی وب، نیازی به این راه حل ها نیست. شما میتونید از Font-Face ها استفاده کنید. برای اطلاعات بیشتر، میتونید به این آدرس (http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/) رجوع کنید.

موفق باشید.

[hsadeh]

سلام - امكان داره كمي در مورد Font-Face توضيح بدهيد ؟

[mehdi.mousavi]

سلام - امكان داره كمي در مورد Font-Face توضيح بدهيد ؟

سلام.
البته که امکان داره... :لبخندساده:

Font-Face یه CSS Rule هستش، که به شما اجازه میده تا فونتهایی رو در CSS خودتون آدرس کنید که روی ماشین Client نصب نشده. از اونجاییکه طبق معمول هر Browser ای یه سازی میزنه، برخی از Browser ها حتما انتظار دارن که شما فایل eot بهشون بدید. در مقابل برخی دیگه از Browser ها، با فایلهای ttf و otf هم کار میکنن. بنابراین برای اینکه بتونید تو همه Browser های مهم، از فونت مورد نظر استفاده کنید، بهتره تا مراقب این مساله باشید که چه فایلی رو توی کدوم Browser ای آدرس می کنید.

برای تبدیل فونتها از یک فرمت به فرمت دیگه، میتونید از ابزارهای رایگان این کار استفاده کنید:


FontForge (http://fontforge.sourceforge.net/)
WEFT (http://www.microsoft.com/typography/WEFT.mspx)
و ...

یا می تونید از Google Font API ها استفاده کنید (البته فعلا فونتهایی که تو Repository ی گوگل ارائه میشه همگی انگلیسی بوده و تعدادشون بسیار کمه. برای اطلاعات بیشتر بخش اخبار سایت رو برای Google Font API ها جستجو کنید).

در نهایت، با نوشتن همچین CSS و Attach کردن اون به Page میتونید از فونت مورد نظر مثل بقیه فونتها در CSS خودتون استفاده کنید:

@font-face{
font-family:'Whatever Font';
src: url('WhateverFont.eot'); /*IE-Specific *
}
@font-face{
font-family:'Whatever Font';
src: url('WhateverFont.otf'); /*Other browsers, including Firefox and Chrome... *
}


پر واضحه که تو مثال فوق، شما باید فایل WhateverFont.eot و WhateverFont.otf رو در کنار فایلهای پروژه قرار بدید.

موفق باشید.

[Milad_black70]

ببخشيد اگه نبايد اين سوالو اينجا بپرسم، ولي ميشه راهنمايي كنيد كه در مورد وبلاگها هم ميشه اينكارو انجام داد يا نه؟ مثلا تو بلاگ اسكاي ميشه فونت دلخواه فارسي استفاده كرد؟

[mehdi.mousavi]

ببخشيد اگه نبايد اين سوالو اينجا بپرسم، ولي ميشه راهنمايي كنيد كه در مورد وبلاگها هم ميشه اينكارو انجام داد يا نه؟ مثلا تو بلاگ اسكاي ميشه فونت دلخواه فارسي استفاده كرد؟

البته که میشه، فقط باید فونت مورد نظر رو آدرس کنید.

[Milad_black70]

خيلي خيلي ممنونم. فرمت eot رو كه استفاده كردم با IE درست لود شد. ولي چه با eot چه ttf و چه otf، هيچكدوم با موزيلا فايرفاكس جواب ندادن و فونت لود نشد. با موزيلا مشكلي داره؟

[mehdi.mousavi]

خيلي خيلي ممنونم. فرمت eot رو كه استفاده كردم با IE درست لود شد. ولي چه با eot چه ttf و چه otf، هيچكدوم با موزيلا فايرفاكس جواب ندادن و فونت لود نشد. با موزيلا مشكلي داره؟

سلام.
قاعدتا نباید مشکلی داشته باشه. (من قبلا استفاده کرده بودم و درست کار می کرد). در هر حال:



Gecko 1.9.1 (Firefox 3.5) supports TrueType and OpenType fonts.
Gecko 1.9.2 (Firefox 3.6) adds support for WOFF.



موفق باشید.

[Milad_black70]

ببخشيد كه همچنان مشكلم حل نشده! براي آزمايش،‌ تو وبلاگ اينكارو انجام دادم. اين css رو هم اضافه كردم: (هر 3تا فرمت رو آپلود كردم و آدرس دادم)

<style type="text/css">
@font-face {
font-family: "Khodkar";
src: url('http://milad-ashi.persiangig.com/Fonts/Khodkar.eot');
}
@font-face {
font-family: "Khodkar";
src: url('http://milad-ashi.persiangig.com/Fonts/Khodkar.ttf');
}
@font-face{
font-family: "Khodkar";
src: url('http://milad-ashi.persiangig.com/Fonts/Khodkar.otf');
}اگه ممكنه اينو (http://mankade.blogsky.com)هم با IE باز كنين و هم با firefox. ميبينين كه با اولي فونت خودكار لود ميشه و با دومي نه!

[Milad_black70]

دوستان كسي نيست كمك كنه؟
يه جايي يه اينو خوندم: ولي متاسفانه چندان سر در نياوردم! ظاهرا فايرفاكس براي اينكه بتونه از يه سايت ديگه دانلود كنه بايد يه كدهايي اضافه كنيم كه اجازه بگيره! كسي ميتوني يه سري به اينجا (https://developer.mozilla.org/En/HTTP_Access_Control)بزنه؟
Same-origin rule: By default, Firefox will only accept relative links. If you want to use absolute links or include fonts from different domains, you need to send these fonts with Access Control Headers (https://developer.mozilla.org/En/Cross-Site_XMLHttpRequest)

[atefe_asadi]

فونتی که می سازیم باید به کلاینت ارسال بشه. منطقیه که مثلا 60 کیلوبایت فونت رو استفاده کنیم؟

[hamid1988]

این (http://blog.webkar.net/?p=33)لینک نحوه ی استفاده از فونت دلخواه در سایت رو با کمک جاوا اسکریپت آموزش میده.

[mehdi.mousavi]

فونتی که می سازیم باید به کلاینت ارسال بشه. منطقیه که مثلا 60 کیلوبایت فونت رو استفاده کنیم؟

سلام.
بستگی داره به "مخاطبین" سایت. برخی اوقات منطقیه، برخی اوقات خیر. اما این مساله مد نظر داشته باشید که CSS ها سمت Browser بطور خودکار Cache میشن، در نتیجه در Request های بعدی به سرور، دیگه اون 60KB از سرور دریافت نخواهد شد.

موفق باشید.

[mehdi.mousavi]

دوستان كسي نيست كمك كنه؟
يه جايي يه اينو خوندم: ولي متاسفانه چندان سر در نياوردم! ظاهرا فايرفاكس براي اينكه بتونه از يه سايت ديگه دانلود كنه بايد يه كدهايي اضافه كنيم كه اجازه بگيره! كسي ميتوني يه سري به اينجا (https://developer.mozilla.org/En/HTTP_Access_Control)بزنه؟
Same-origin rule: By default, Firefox will only accept relative links. If you want to use absolute links or include fonts from different domains, you need to send these fonts with Access Control Headers (https://developer.mozilla.org/En/Cross-Site_XMLHttpRequest)



سلام.
من الان فرصت کردم و لینکهایی که داده بودید رو بدقت خوندم. Firefiox نسخه 3.5 به بعد، این قابلیت در Browser گنجونده شده که دسترسی به Resource های خارج از Domain فعلی محدود به اخذ مجوز از سرور مقصد میشه. در حال حاضر Web Font ها و XMLHttpRequest API ها از این استاندارد W3C پیروی میکنن.

اما راه حل چیه؟ اگر از سرور Linux ای استفاده میکنید، میتونید فایل htaccess ای کنار فونتها بسازید و در این فایل متنی این Script رو بنویسید:


<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
اگر از سرور ویندوزی استفاده می کنید، در حال حاضر ایده ای ندارم (احتمالا باید یه فایل ashx ساخت و از طریق اون فونتها رو Serve کرد).

اما با توجه به شرایطی که مطرح کردید، احتمالا همه این کارها برای شما غیر ممکنه. خوشبختانه یه فرصت دیگه دارید به این ترتیب که میتونید داده های فونت رو، بصورت Base64 در درون خود CSS نگهداری کنید. اینطوری هر وقت CSS شما Load بشه، عملا اطلاعات فونت نیز به سمت client میاد و دیگه نیازی به داشتن دسترسی مورد نظر Firefox نخواهید داشت (البته این دسترسی در مرورگرهای دیگه نیز به مرور زمان پیاده سازی خواهد شد).

برای انجام این کار، به این سایت (http://www.fontsquirrel.com/fontface/generator) برید. فایل TTF خودتون رو اونجا Upload کنید و با Option هایی که انتخاب میکنید، در نهایت یه فایل ZIP دریافت کنید که حاوی CSS مورد نظر هستش. سپس از اون CSS استفاده کنید و دیگه نگران دسترسی ها نباشید.

موفق باشید.

[Milad_black70]

به شدت ممنونم آقای موسوی به خاطر کمکتون، ولی همچنان من مشکل دارم! وقتی فونتمو تو اون فایل فرستادم کلی ارور داد و کیت مورد نظر رو بهم نداد!
اگه فرصت دارین یه لطف دیگه هم بکنین و واسم تست کنین ببینین مشکل از کجاست:
این فونتمه: http://milad-ashi.persiangig.com/Fonts/Khodkar.ttf