سعید-رضایی-ساری-خونیرث-برنامه-نویسی-کد-نویسی-فروش-اسکریپت-دانلود-Saeid-rezaei-khunires-admin-manager
خونیرث مجموعه ای از داغ ترین ایده های ثروت ساز بین المللی و ایرانی در کنار کادری مجرب در زمینه های توسعه و طراحی سایت، اپلیکیشن، امور گرافیکی کاملاً اختصاصی می باشد. سهم خودتان را از وب بردارید...
برندها-ایرانسل-اسنپ-اپلیکیشن-اسکریپت-آپارات-همراه-اول-بانک-ملی-پاسارگاد-هواوی-دیجیاتو-زرین-پال-نت-برگ-دونیت-کافه-بازار-هدفون-آهنگ-عکس-فیلم-کد-نویسی-طراحی-وب-برنامه-نویسی-پونیشا-پاپکو-دیجی-کالا-ورزش-فوتبال-90-نتیجه-فوتبال-بازی-شیپور-دیوار-آگهی-رایگان-خونیرث

برگشت به لیست

استفاده از فونت های سفارشی شده، یک راه فوق العاده برای کمک به ایجاد یک نگاه منحصر به فرد برای سایت مان است. در حال حاضر تعدادی از روش های مختلف برای جاسازی فونت ها در یک وب سایت وجود دارد که برخی از آنها در واقع بر اساس خدمات شخص ثالث پرداخت شده هستند. در این آموزش جزئیات نحوه استفاده از گزینه های font-face @ در یک سایت وردپرس برای جاسازی فونت ذخیره شده محلی ، به جای استفاده از هر گونه راه حل جداگانه ای مانند Typekit یا Google Webfonts ارائه شده است. برای ساده سازی همه چیز ، از یک وردپرس تازه نصب شده با تم  پیش فرض twentyeleven استفاده خواهم کرد، هرچند که این روش برای هر تمی قابل استفاده است. در واقع سایت شما قبل از انجام تغییرات اینگونه به نظر خواهد رسید.

 

یک فونت را انتخاب کنید

من از فونت آزاد  Carbon Block استفاده خواهم کرد. با وجود هر گونه فونت رایگان یا دارای حق عضویت، نیاز است که شرایط و ضوابط را بررسی نمود تا اینکه دریابیم آیا واجد شرایط برای استفاده در طراحی سایت شما است یا خیر.

 

 

فونت Carbon Black

در حال حاضر هیچ نوع فایل استاندارد شده برای فونت های قابل قرارگیری در مرورگرهای با نسخه های قدیمی اینترنت اکسپلورر با استفاده از فرمت خاص eot. و iPhone با استفاده از .svg وجود ندارد. اکثر مرورگرهای مدرن از فرمت فونت آزاد وب (WOFF) و TrueType (TTF) پشتیبانی نمی کنند، اما برای اطمینان از اینکه طیف گسترده ای از دستگاه ها آن فونت را به درستی نمایش می دهند، باید فرمت های مختلفی در دسترس باشند.

 

تبدیل فونت به @font-Face

می توان یک فونت را به تمام فرمت های مورد نیاز خود تبدیل کنید، هرچند استفاده از ژنراتور Squirrels @ font-face بسیار ساده تر است. با این کار، فونت انتخاب شده شما به تمام فرمت های مورد نیاز تبدیل خواهد شد و کد CSS مورد نیاز شما را تولید خواهد نمود.

 

 

ژنراتور فونت Squirrel @Front-Face

شما فونت انتخاب شده خود را در قالب ttf. یا otf. نیاز خواهید داشت. پس از اضافه کردن فونت خود به ژنراتور با دکمه «افزودن فونت»، بهینه سازی را انتخاب کنید و توافق را تیک بزنید. شما قادر خواهید بود فایل zip را با فرمت های مورد نیاز فونت، یک فایل .css و یک فایل تست .html دانلود کنید که در آن می توانید چک نمایید که ایا فونت را به صورت صحیح رندر کرده اید یا خیر. فایل .css چیزی شبیه زیر به نظر خواهد رسید.

 

 

کد CSS ایجاد شده Font Squirrel

این کد تقریبا آماده برای استفاده است، خانواده فونت (Font family) را می توانید به آنچه که می خواهید تغییر دهید، هر چند که اگر آن را به عنوان نام فونت باقی بگذارید می تواند به جلوگیری از سردرگمی کمک نماید اگر شما شروع به استفاده از چند فونت سفارشی نمایید. src مکان برای فونت هایی است که ممکن است بخواهید تغییر دهید، بعدا به این موضوع پرداخته خواهد شد.

 

فایل های فونت را در سایت خود آپلود کنید

گام بعدی آپلود فونت به سایت شما است، ابتدا اطمینان حاصل کنید که از تمی که می خواهید فونت را به آن اضافه کنید پشتیبان گرفته اید. چهار فایل مورد نیاز برای آپلود عبارتند از فرمت های .eot، .svg، .woff، و .ttf از فایل زیپ دانلود شده. فونت ها باید به دایرکتوری پایه مربوط به تم وردپرس شما آپلود شوند.

 

تعریف Back-up Fonts

اکنون کد را می توانید در ابتدای stylesheet سایت قرار دهید و به صورت یک فونت استاندارد به آن ارجاع دهید. مهم است که برخی فونت های اضافی را برای مواردی مرورگر نمی تواند فونت محلی را نشان دهد بگنجانید.

سربرگ CSS

بعد از گنجاندن آن، حال بایستی فونت سفارشی شده در سراسر طیف وسیعی از مرورگرها نمایش داده شود.

 

نصب فونت سفارشی

اگر شما تم ها را مکررا تغییر دهید اما می خواهید فونت را بدون تغییر حفظ کنید، باید فایل فونت ها را به پوشه "/public_html" مربوط به سایت وردپرسی خود آپلود کنید. البته Stylesheet  جدید شما  لازم است که با استفاده از کد  font-face@ آپلودشود، با این تفاوت که src از URL دقیق استفاده می کند.

آیا یک روش ترجیحی برای بکارگیری فونت های سفارشی شده دارید یا هر گونه ابزار مفید دیگری را می شناسید؟ ما را در نظرات مطلع سازید .


تگ ها : مقاله چگونه از فونت های سفارشی شده با font face در ورد پرس استفاده کنیم آموزش اضافه کردن فونت دلخواه به قالب سایت آموزش افزودن فونت فارسی به قالب وردپرس روش اضافه کردن فونت به قالب سایتتان جلسه 15: افزودن فونت فارسی به قالب وردپرس + آموزش ویدیویی چگونه بر روی سایت وردپرس خود فونت‌ نصب کنیم؟ font آموزش اضافه کردن فونت به قالب وردپرس+تغییر فونت قالب وردپرس: آموزش افزودن فونت به قالب و استفاده از آن – مارکت DevMe افزودن فونت فارسی به قالب وردپرس افزودن فونت‌های پارسی به نوشته و پوسته آموزش تغییر فونت قالب وردپرس و مدیریت وردپرس نحوه اضافه کردن فونت های گوگل به ویرایشگر وردپرس اضافه کردن آیکن به منوهای سفارشی وردپرس بدون افزونه آموزش اضافه کردن فونت فارسی به قالب سفارشی سازی پیشخوان وردپرس جلسه 15: چگونگی افزودن فونت فارسی به قالب وردپرس • عصر معلمان چگونگی سفارشی فرم بازخورد وردپرس استفاده از فونتها یا CSS Fonts اضافه کردن دکمه به TinyMCE 4.0 در وردپرس 3.9 ساخت بنر برای صفحه اصلی سایت با نوع پست‌های سفارشی در وردپرس آموزش تغییر فونت صفحه ی مدیریت وردپرس آیکون فونت FontAwesome آموزش رایگان فارسی سازی قالب وردپرس ( قدم به قدم ) – امنیت اطلاعات ٢۵ ترفند CSS بسیار مفید که باید بدانید دوره جامع و حرفه ای آموزش طراحی قالب وردپرس (جدید 70جلسه) چگونه به پست سفارشی آیکون دلخواه اضافه کنیم؟ چگونه فونت ایرانی (BYekan) را به وردپرس اصافه کنیم؟ [بایگانی پست سفارشی سازی ورودی فیلدها بسته مقدماتی تا فوق تخصصی آموزش فارسی سازی قالب و افزونه های چگونه فرم ارتباط پلاگین Contact Form 7 را در وردپرس شکل دهیم اصلاح فونت ها در دامین پارک شده در وب سایت های وردپرسی ساخت صفحه در دست تعمیر در وردپرس با Maintenance – طراحی سایت غیرفعال کردن بارگذاری فونت Open Sans گوگل در پیشخوان وردپرس ساخت فرم تماس حرفه ای با Contact Form 7 + استایل جذاب آموزش نحوه تغییر سبک و اندازه فونت در وردپرس وبسایت برای بهبود نرخ راهنمای طراحی دکمه ها و call to action بهتر در وردپرس » وبلاگ وب ایده سفارشی سازی صفحه ورود وردپرس آموزش استفاده از Child Theme و کاربرد آن در وردپرس فونت با DW Promobar یک نوار اعلانیه به وردپرس بیاورید ایجاد قالب دلخواه برای یک مطلب در وردپرس دانلود فیلم آموزشی فارسی سازی قالب و پوسته وردپرس قالب شرکتی وردپرس Cstar design – وب چین شیوه نامه ی وردپرس CSS در قالب های وردپرسی آخرین های تلگرام ساختن جعبه محتوا در وردپرس با افزونه Service box روزهای خط خطی CSS با قلم های سفارشی در Base64 – تیلور لوپز ツ وبلاگ انجمن برنامه نویس های ایران قالب وردپرس تفریحی، خبری، مجله ای: قالب وردپرس ونوس بهترین راه برای بارگذاری سی اس اس در وردپرس آموزش جامع استفاده از Child Theme در وردپرس (2) بسته مقدماتی تا فوق تخصصی آموزش فارسی سازی قالب و ویرایش استایل قالب ( فونت رنگ فارسی سازی و ) افزودن جستجو تمام صفحه به وردپرس قالب وردپرس مجله خبری multinews آموزش شخصی سازی رابط کاربری ویدئویی و حرفه ای آموزش ویدیویی قالب صحیفه وردپرس قالب وردپرس سایت فروشگاهی افزونه flatastic قالب وردپرس وردپرس قالب وردپرس Be بی تم فارسی نسخه 17.6 با پنل کاربری قدرتمند نصب و راه اندازی وردپرس شبکه ، چند سایته یا چند کاربره خیلی از آن چه جستجو پیشرفته در وردپرس بدون افزونه • سون لرن چگونگی کاهش فونت در یک کامپیوتر با استفاده از صفحه کلید. یک آموزش استفاده از Child Theme در وردپرس 2 قالب پروفشیونال قالب وردپرس انفولد 10 ابزار جالب برای HTML 5 Searches related to چگونه از فونت های سفارشی شده با @font

نظرات




نماد