کد تغییر فونت

[xCode]

خسته نباشید،

میخواستم بدونم چطور میشه فونتهای سایت رو عوض کرد؟

رنگ فونت سایز؟؟؟

کد یا پلاگین خاصی داره ؟

[iraj_astara]

شما باید فایل css قالب رو دستکاری کنید
کد font-family برای انتخاب فونت مثلا font-family:Tahoma, Geneva, sans-serif;
color برای رنگ فونت

[xCode]

اینطور که معلومه tahoma از بقیه فونتها قشنگتره! میشه فونتی جز tahoma رو ست کرد ؟

مثلا فونتهای ویندوز مثل: B Homa

[iraj_astara]

اینطور که معلومه tahoma از بقیه فونتها قشنگتره! میشه فونتی جز tahoma رو ست کرد ؟

مثلا فونتهای ویندوز مثل: B Homa

بله میشه ست کرد ولی اصولا برای نوشته های متن از tahoma استفاده میشه
باید ایمپورت کنید اون فونت هارو

[xCode]

میشه کمی بیشتر توضیح بدید؟

برای ایمپورت کردن فونتهای ویندوز باید از پلاگین استفاده کرد ؟ یا روش خاصی داره ؟

در این روش یا با این پلاگین میشه سایز و رنگ فونتها رو هم تغییر داد ؟

[WinDesign]

یه سری فونت ها هستن که به صورت پیش فرض با ویندوز نصب میشن و قابل حذف شدن هم نیستن. مثل tahoma یا arial یا ...

فونت هایی هم هستن مثل b homa و b mitra و کلاً سری B و ... که خودتون اضافه می کنید.

حالا اگه بخواین از یک فونت قشنگ (مثلاً b yekan) برای عنوان مطالبتون استفاده کنید، دو راه دارید:
اول اینکه بگید: اگر کربر فونت B Yekan رو داشت، فونت عنوان مطلب، B Yekan باشه، اگر نداشت، فونت Tahoma باشه.
که کد CSSش اینطوریه: font-family:b yekan,tahoma;

راه حل دوم اضافه کردن فونت به CSS هست. یعنی شما فایل های فونت رو آپلود می کنید و در css آدرس می دید + یک اسم برای فونت.
بعد به این صورت کد رو میزارید: font-family:b yekan,FONT NAME;
(در مثال بالا FONT NAME نام جدید فونتی هست که انتخاب می کنید...)
این معنی هست که اگر کاربر فونت b Yekan رو داشت، که هیچی. اگر نداشت، فونت FONT NAME رو براش ایجاد میکنه.

در ضمن باید برای اضافه کردن فونت رو با فرمت های ttf و eot داشته باشید.


@font-face {
font-family:'CalligraphyFLFRegular';
src:url('CalligraphyFLF-webfont.eot');
src:local('CalligraphyFLFRegular'), url('CalligraphyFLF-webfont.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}

اگر EOT فونتتون رو ندارین، میتونید به صورت آنلاین فرمت های otf یا ttf رو به eot تبدیل کنید=>
گوگل: ttf to eot online convertor
Online Font Converter (http://onlinefontconverter.com/)

موفق باشید.

[xCode]

ممنون بابت راهنمایی های کاملتون، اما قالب من چندتا فایل .css داره!

فایل eot رو آپ کردم، فایل template.css رو ویرایش کرم، اما باز هم فونتها تغییری نکرد !

یه نگاهی میندازین ؟

Template.css::




/**
* @version 1.0 April 15, 2011
* @author RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - 2011 RocketTheme, LLC
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
*/

/* Core */
html, body {margin-bottom: 1px;height: 100%;}
body {font-family: Helvetica,Arial,sans-serif;}
h5 {text-transform: uppercase;font-size: 100%;}
.rt-container, #rt-sidebar-a, #rt-sidebar-b, #rt-sidebar-c {background: transparent;}
ul {list-style-image: none;}
ul.menu {padding-left: 0;}
#rt-content-top, #rt-content-bottom {clear: both;overflow: visible;}
#rt-debug {padding-top: 20px;position: relative;}
#rt-page-background {position: relative;}
.rt-block {margin: 10px 0;}

/* Header */
#rt-header .rt-block {margin: 0;}
#rt-header-surround {padding-bottom: 1px;}
#rt-header-surround2 {padding-bottom: 10px;}
#rt-header-overlay {padding-bottom: 60px;}
.bodylevel-low #rt-header-surround {background-image: none;}
.bodylevel-low #rt-header-surround2 {background: none;}

/* Logo */
#rt-logo {display: block;width: 185px;height: 32px;margin-top: -5px;}

/* Top Menu */
.rt-menubar {margin: 0 15px;}
.rt-menubar2 {margin-left: -15px;}
.rt-menubar3 {height: 45px;margin-right: -15px;}
#rt-body-surround .module-content .rt-menubar, #rt-body-surround .module-content .rt-menubar2, #rt-body-surround .module-content .rt-menubar3 {margin: 0;height: auto;padding: 0;background: none;}
.bodylevel-low .menutop .fusion-submenu-wrapper {background-image: none;}

/* Main Body */
#rt-body-surround {margin-top: -60px;margin-left: 15px;margin-right: 15px;z-index: 2;position: relative;}
#rt-body-surround2 {margin-left: -25px;}
#rt-body-surround3 {margin-right: -25px;padding: 10px 10px 0 10px;}
.bodylevel-low #rt-body-surround {background: none;}
.bodylevel-low #rt-body-surround2 {background: none;}
.bodylevel-low #rt-body-surround3 {background: none;}

/* Modules */
.module-title {margin-bottom: 20px;}
.module-title .title {margin: 0;font-weight: normal;font-size: 140%;line-height: 130%;padding: 0;letter-spacing: 1px;}

/* Module Title Variations */
.title1 .module-title, .title2 .module-title, .title3 .module-title, .title4 .module-title, .title5 .module-title, .title6 .module-title {margin: -8px -8px 12px -8px;padding: 7px;border-radius: 6px;}
.title7 .module-title .title {font-size: 220%;}
.title8 .module-title {padding-bottom: 10px;margin-bottom: 10px;}
.bodylevel-low .title1 .module-title {background-image: none;}

/* Module Box Variations */
.box1 .rt-block, .box1 #rt-mainbody, .box2 .rt-block, .box2 #rt-mainbody, .box3 .rt-block, .box3 #rt-mainbody, .box4 .rt-block, .box4 #rt-mainbody, .box5 .rt-block, .box5 #rt-mainbody, .box6 .rt-block, .box6 #rt-mainbody, .box7 .rt-block, .box7 #rt-mainbody {border-radius: 6px;}
.box1 #rt-mainbody, .box2 #rt-mainbody, .box3 #rt-mainbody, .box4 #rt-mainbody, .box5 #rt-mainbody, .box6 #rt-mainbody, .box7 #rt-mainbody {margin: -15px;padding: 15px;}
.bodylevel-low .box1 .rt-block, .bodylevel-low .box1 #rt-mainbody {background-image: none;}

/* Module Standard Variations */
.standardcase .module-title .title {text-transform: inherit;}
.lowercase .module-title .title {text-transform: lowercase;}
.uppercase .module-title .title {text-transform: uppercase;}
.flush .rt-block {padding: 0;}
.flushtop .rt-block {padding-top: 0;}
.flushbottom .rt-block {padding-bottom: 0;}
#rt-popup, #rt-popuplogin {display: none;}

/* Side Menus */
.module-content ul.menu {margin-left: 0;}
.module-content ul.menu li {list-style: none;margin-bottom: 6px;padding-bottom: 6px;}
.module-content ul.menu li li {background: none !important;}
.module-content ul.menu a, .module-content ul.menu .separator, .module-content ul.menu .item {padding: 0 0 0 18px;background-position: 0 2px;background-repeat: no-repeat;line-height: 140%;font-size: 14px;display: block;}
.module-content ul.menu a span, .module-content ul.menu .separator span, .module-content ul.menu .item span {padding: 6px;}
.module-content ul.menu a:hover span, .module-content ul.menu li.active > a span, .module-content ul.menu li.active > .separator span, .module-content ul.menu li.active > .item span {border-radius: 6px;}
.module-content ul.menu ul {padding-top: 20px;padding-bottom: 0;}
.module-content ul.menu ul ul {padding-bottom: 0;}
.module-content ul.menu .subtext em {line-height: 14px;padding-left: 20px;}
.module-content ul.menu em {display: block;font-size: 80%;font-style: normal;font-weight: normal;}
.module-content ul.menu .image img {float: left;}
.module-content ul.menu .item.image {background: none;padding-left: 8px;}

/* Bottom */
#rt-bottom-overlay {padding-top: 10px;}
.bodylevel-low #rt-bottom-surround2 {background: none;}
.bodylevel-low #rt-bottom-overlay {background-position: 50% 0;}

/* Footer */
.fixedfooter-1 #rt-footerbar {position: fixed;width: 100%;bottom: 0;left: 0;z-index: 1000;}
#rt-footerbar .rt-block {padding: 0 15px;}
#rocket {display: block;width: 128px;height: 17px;vertical-align: middle;}
#gantry-totop .totop-desc {float: right;padding: 0;margin: 0;}
#gantry-resetsettings {display: block;text-align: center;}
.bodylevel-low #rt-footerbar {background-image: none;}

/* Copyright */
.copytext {padding: 10px 0;display: block;text-align: center;}

/* Typography */
.readonstyle-button .readon {display: inline-block;height: 30px;margin: 0 0 0 5px;}
.readonstyle-button .readon span {display: block;margin: 0 0 0 -5px;padding: 0 28px 0 10px;border: 0;font-size: 13px;cursor: pointer;line-height: 30px;overflow: visible;height: 30px;}
.readonstyle-button .readon .button {display: block;padding: 0 28px 0 10px;border: 0;font-size: 13px;cursor: pointer;line-height: 30px;overflow:visible;height: 30px;margin: 0 0 0 -5px;outline: none;}
.readonstyle-button .readon span span {display: inline;background: none;margin-left: 0;padding: 0;float: none;}
.readonstyle-button .readon:hover {background-position: 100% -36px;}
.readonstyle-button .readon:hover span, .readonstyle-button .readon:hover .button {background-position: 0 -36px;}
.readonstyle-button .button2 .readon {background-position: 100% -72px;}
.readonstyle-button .button2 .readon .button, .readonstyle-button .button2 .readon span {background-position: 0 -72px;}
.readonstyle-button .button2 .readon:hover {background-position: 100% -108px;}
.readonstyle-button .button2 .readon:hover .button, .readonstyle-button .button2 .readon:hover span {background-position: 0 -108px;}
.readonstyle-button .button3 .readon {background-position: 100% -144px;}
.readonstyle-button .button3 .readon .button, .readonstyle-button .button3 .readon span {background-position: 0 -144px;}
.readonstyle-button .button3 .readon:hover {background-position: 100% -180px;}
.readonstyle-button .button3 .readon:hover .button, .readonstyle-button .button3 .readon:hover span {background-position: 0 -180px;}
.readonstyle-button .button4 .readon {background-position: 100% -216px;}
.readonstyle-button .button4 .readon .button, .readonstyle-button .button4 .readon span {background-position: 0 -216px;}
.readonstyle-button .button4 .readon:hover {background-position: 100% -252px;}
.readonstyle-button .button4 .readon:hover .button, .readonstyle-button .button4 .readon:hover span {background-position: 0 -252px;}
.readonstyle-link .readon {background: none !important;}
.readonstyle-link .readon .button, .readonstyle-link .readon span {background: none !important;border: 0;font-size: 12px;outline: none;padding: 0;margin: 0;line-height: 130%;font-weight: bold;}
.rokchecks, .rokradios {padding: 3px 0 5px 18px;line-height: 120%;cursor: pointer;}
.rokradios {background-position: 0 2px;background-repeat: no-repeat;}
.rokradios-active {background-position: 0 -128px;background-repeat: no-repeat;}
.rokchecks {background-position: 0 -265px;background-repeat: no-repeat;}
.rokchecks-active {background-position: 0 -405px;background-repeat: no-repeat;}
.date-block .date {font-size: 14px;}
#rt-main .inputbox, .inputbox {border-radius: 6px;position: relative;z-index: 1000;}

/* Breadcrumbs */
#rt-breadcrumbs {padding: 0 25px;margin-bottom: 15px;}
#breadcrumbs-home {width: 11px;height: 11px;display: block;float: left;background-position: -93px 0;margin-top: 6px;margin-right: 5px;}
#breadcrumbs-home:hover {background-position: -93px -19px;}
#breadcrumbs h3, .leading_separator {display: none;}
.rt-breadcrumb-surround {position: relative;overflow: hidden;padding: 0;margin: 10px 0;display: inline-block;height: auto;}
span.breadcrumbs {display: inline-block;font-size: 130%;overflow: hidden;}
span.breadcrumbs img {display: none;}
span.breadcrumbs a, span.no-link {padding: 6px;float: left;display: block;line-height: 12px;font-size: 90%;margin-right: 5px;}

/* Popup Module Feature */
#rt-login-button .buttontext span.desc, #rt-popupmodule-button .buttontext span.desc {text-transform: lowercase;cursor: pointer;font-size: 14px;}
#rt-login-button .buttontext span.icon, #rt-popupmodule-button .buttontext span.icon {width: 21px;height: 21px;display: block;float: left;margin-right: 5px;}
#rt-popup .module-content, #rt-popuplogin .module-content {margin: 0;}
#rt-popup .rt-block, #rt-popuplogin .rt-block {padding: 0 5px;}
#rt-popup .title, #rt-popuplogin .title {padding: 0;margin-bottom: 10px;margin-top: 5px;}
#rt-popup .inputbox, #rt-popuplogin .inputbox {width: 149px;height: 16px;}

/* Font Sizer Feature */
#rt-accessibility .rt-desc {display: block;float: left;text-transform: uppercase;font-size: 11px;}
#rt-accessibility .button {display: block;width: 15px;height: 15px;}
#rt-accessibility a.small .button {background-position: -16px -29px;}
#rt-accessibility a.small:hover .button {background-position: -16px -45px;}
#rt-accessibility a.large .button {background-position: 0 -29px;}
#rt-accessibility a.large:hover .button {background-position: 0 -45px;}
#rt-header-surround a.small .button, #rt-bottom-surround a.small .button, #rt-footerbar a.small .button {background-position: -16px -63px;}
#rt-header-surround a.small:hover .button, #rt-bottom-surround a.small:hover .button, #rt-footerbar a.small:hover .button {background-position: -16px -79px;}
#rt-header-surround a.large .button, #rt-bottom-surround a.large .button, #rt-footerbar a.large .button{background-position: 0 -63px;}
#rt-header-surround a.large:hover .button, #rt-bottom-surround a.large:hover .button, #rt-footerbar a.large:hover .button {background-position: 0 -79px;}

/* Feature Table */
.featuretable {margin-bottom: 15px;border-radius: 6px;}
.featuretable-border {margin: -1px;border-radius: 6px;}
.featuretable-col {float: left;}
.featuretable-col.ft-col-last {border-bottom-right-radius: 6px;}
.featuretable-col.ft-col-last .featuretable-col-border {border-right: 0;}
.col1 .featuretable-col {width: 100%;}
.col2 .featuretable-col {width: 50%;}
.col3 .featuretable-col {width: 33.33%;}
.featuretable-col, .col4 .featuretable-col {width: 25%;}
.col5 .featuretable-col {width: 20%;}
.col6 .featuretable-col {width: 16.66%;}
.featuretable-head {padding: 5px 0 10px;text-align: center;margin: -1px -1px 0 -1px;}
.featuretable-col.ft-col-first .featuretable-head {border-top-left-radius: 6px;}
.featuretable-col.ft-col-first.highlight {border-top-left-radius: 6px;border-bottom-left-radius: 6px;}
.featuretable-col.ft-col-last.highlight {border-top-right-radius: 6px;border-bottom-right-radius: 6px;}
.featuretable-col.ft-col-last .featuretable-head {border-top-right-radius: 6px;}
.featuretable-cell {padding: 10px;text-align: center;}
.featuretable-cell.bottom {border-bottom: 0;height: 45px;}
.featuretable-col.highlight {z-index: 2;position: relative;}
.featuretable .head-text {position: relative;margin: 0 auto;font-weight: bold;}
.featuretable .name {font-size: 20px;padding: 3px 0;text-align: center;margin-bottom: 10px;}
.featuretable-col.ft-col-last .name {text-indent: 0;}
.featuretable .price {text-align:center;font-style: italic;}
.featuretable .item1 {font-size: 50px;line-height: 40px;display: block;}
.featuretable .item2 {font-size: 14px;display:block;}
.featuretable-cell.bottom .itemtext {display: block;font-size: 10px;font-style: italic;}
.col5 .featuretable-cell.bottom .itemtext {font-size: 9px;}
.featuretable ul {margin-bottom:0 !important;}
.featuretable ul li {margin-bottom:0 !important;text-align:left;display:inline-block;}
.bodylevel-low .featuretable-head {background-image: none;}
.bodylevel-low .highlight .featuretable-head {background-image: none;}
.bodylevel-low .featuretable-cell.bg {background-image: none;}
.bodylevel-low .featuretable-col.ft-col-even .featuretable-cell.bg {background-image: none;}

/* Custom Content */
img.feature-img {width: 212px;height: 150px;padding: 5px;}
.feature-img-surround {width: 222px;height: 178px;}
.image-block-surround {width: 160px;height: 150px;float: left;margin-right: 15px;}
img.image-block {width: 150px;height: 122px;padding: 5px;position: relative;}
.content-block {overflow: hidden;}
.number-image {display: inline-block;float: left;margin-right: 15px;margin-bottom: 15px;padding: 5px;position: relative;}
.number-image-text {display: block;text-transform: uppercase;font-weight: bold;font-size: 20px;padding-top: 10px;margin: 0 0 -8px -5px;}
.heading1 {font-size: 160%;display: block;margin-bottom: 15px;}

/* iPhone */
body #gantry-viewswitcher {z-index: 100;right:50%;position:relative;top:inherit;right: inherit;margin: 1em auto;}

[WinDesign]

سلام.

1- فایل پیوست رو دانلود کنید.
2- فایل های BYekan.ttf و BYekan.eot رو جایی آپلود کنید که فایل template.css آپلود شده.
3- فایل template.css که پیوست کردم رو با template.css قبلی عوض کنید.
4- از byekan می تونید استفاده کنید.

توصیه:
اگر میخواین فونت رو تغییر بدین، به این صورت عمل کنید:
font-family:b yekan,byekan,tahoma;

یعنی اول ببینه رو کامپیوتر شخص فونت b yekan هست یا نه، اگر نبود از وب فونت رو لود کنه. (اینطوری سرعت لود صفحه افزایش میابد)

(در ضمن b yekan با byekan فرق داره ! دومی اونی هست که خودمون اضافه کردیم و میشه اسمشو تغییر داد.)

موفق باشید.

[xCode]

واقعا نمیدونم چه طور تشکر کنم بابت این همه پیگیری،

دوست عزیز من تمام مراحل رو انجام دادم، اما هنوز فونت سایت تغییری نکرده...

البته بگم که در قالب من، فولدری به اسم css هستش که یکی از 20 و چند فایل اون template.css هست، ممکنه فایل اشتباهی رو ادیت کرده باشیم ؟

[httpserver]

منم دقیقا مشکل ایشون رو دارم. اگر راهنمایی‌ کنید ممنون میشم

[iraj_astara]

دوست عزیز شما میتونید از یه سری ابزار توسعه که در مرورگرها هست استفاده کنید
تو فایرفاکس باید افزونه firebug رو نصب کنید در کروم و اپرا هم فکر کنم همراشون هست
ببینید شما مثلا روی فونت نوشته کلیک راست کنید و Inspect element رو بزنید تو اینجا میتونین ببینین که اسم اون کلاس یا آیدی فایل css چی هست و تو کدوم css قرار داره و کد های اون کلاس یا آیدی رو مشاهده کنید
به همین راحتی در css خودتون وارد کنید یا ویرایش کنید

[xCode]

دوست عزیز شما میتونید از یه سری ابزار توسعه که در مرورگرها هست استفاده کنید
تو فایرفاکس باید افزونه firebug رو نصب کنید در کروم و اپرا هم فکر کنم همراشون هست
ببینید شما مثلا روی فونت نوشته کلیک راست کنید و Inspect element رو بزنید تو اینجا میتونین ببینین که اسم اون کلاس یا آیدی فایل css چی هست و تو کدوم css قرار داره و کد های اون کلاس یا آیدی رو مشاهده کنید
به همین راحتی در css خودتون وارد کنید یا ویرایش کنید

در این صورت بعد از اینکه آدرس تکست مورد نظر رو پیدا کردیم باید کد های p یا span رو برای تعین نوع اندازه فونت به خود نوشته اضافه کنیم ؟!!!

دقیقا فرمت این کدها به چه صورته ؟ و آیا میشه هر جایی ز اونها استفاده کرد؟

[iraj_astara]

اول امتحان بکنید ببینید چی هست بعد سوال
مثلا کلاس سایز متن نوشته شما اینه .p entry (از همین روش پیدا کردیم) کنارش مینیویسه که تو کدوم فایل css هست اگه بود تو css کد رو پیدا میکنیم عوض میکنیم نبود هم که اضافه میکنیم
در مورد اضافه کردن دستی p یا span خیر شما از این ابزار Inspect element استفاده کنید همه ی المان ها css رو به شما میده فقط باید با اونا بازی کنید