انجمن

انجمن وردپرس فارسی » چگونه می‌توانم؟


فونت دلخواه در پوسته :  (۱۰ نوشته)

  • pep30

    آفلاین
    عضو
    تعداد نوشته‌ها: ۸۴
    تشکر شده: ۲۴ بار
    # نوشته شده: ۱۳ سال پیش
    ۲۹ تیر ۱۳۹۰ - ۱۲:۰۳

    چجوری میتونم مثلا فونت یه قسمت و بذارم Koodak ?
    مثل تیتر ها !؟

  • saeli

    آفلاین
    عضو
    تعداد نوشته‌ها: ۲۴۳
    تشکر شده: ۲۵۷ بار
    # نوشته شده: ۱۳ سال پیش
    ۲۹ تیر ۱۳۹۰ - ۱۳:۲۱

    از طریق css می تونی فونت های دیگر را استفاده کنی
    البته فونت هایی را باید استفاده کنی که به صورت پیش فرض در ویندوز باشند در غیر اینصورت باید خود فونت را بزاری و چون اکثر فونت ها حداقل 50 کیلو هستند لود سایت شما را بیشتر میکنه

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    محسن غیاثی - pep30 - Saeed Fard - Omid Sh

  • محسن غیاثی

    آفلاین
    عضو فعال
    تعداد نوشته‌ها: ۹۲۷
    تشکر شده: ۱۱۰۴ بار
    # نوشته شده: ۱۳ سال پیش
    ۲۹ تیر ۱۳۹۰ - ۱۳:۵۲

    سلام دوست عزیز
    از این آموزش و نمونه‌های مشابه که تو نت زیاد هست استفاده کنین.

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    saeli - pep30 - Saeed Fard - Omid Sh

  • pep30

    آفلاین
    عضو
    تعداد نوشته‌ها: ۸۴
    تشکر شده: ۲۴ بار
    # نوشته شده: ۱۳ سال پیش
    ۲۹ تیر ۱۳۹۰ - ۱۵:۳۷

    اول باید فونت مورد نظر رو توی فایل استایل فراخوانی کنیم .

    برای فراخوانی باید از کاراکتر @ استفاده کنیم . به صورت زیر :

    @font-face

    بعد از کاراکتر @ یه اسم قرار میدیم که مهم نیست چی باشه… در اینجا Font-Face هست .

    حالا نحوه فراخوانی کلی هم به صورت زیر هست :

    @font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}

    کد بالا رو توی فایل استایل قرار میدیم…به جای Delicious-Roman.otf باید آدرس فونت مورد نظر رو بدیم و به جای Deliciousاسم فونت یا هر اسمی که موقع فراخوانی فونت میخوایم ازش استفاده میکنیم رو قرار میریم….

    برای دادن خواص دیگه به کد بالا ، مثلا Bold کردن و … کد font-weight: bold; رو بهش اضافه میکنیم… به صورت زیر…

    @font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
font-weight: bold;
}

    خوب…حالا فونت مورد نظر رو با استفاده از کد بالا تعریف کردیم . برای استفاده از اون در هر بخشی به صورت عادی عمل میکنیم . یعنی با استفاده از font-family نام فونتی که تعریف کردیم رو فراخوانی میکنیم . به صورت زیر…

    h3 { font-family: Delicious, sans-serif; }
    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    saeli

  • pep30

    آفلاین
    عضو
    تعداد نوشته‌ها: ۸۴
    تشکر شده: ۲۴ بار
    # نوشته شده: ۱۳ سال پیش
    ۲۹ تیر ۱۳۹۰ - ۱۵:۵۹

    من اینجوری نوشتم 

    @font-face {
font-family: DastNevis;
src: url('/home/orangewd/domains/orangewd.com/public_html/wp-content/uploads/DastNevis.OTF');
}

    بعد اینجوری فراخوانی کردم

    font-family: DastNevis;

    اما نشد !!! تغییر نکرد چرا؟

  • Morteza

    آفلاین
    ناظم
    تعداد نوشته‌ها: ۳۴۰۲
    تشکر شده: ۳۱۲۸ بار
    # نوشته شده: ۱۳ سال پیش
    ۲۹ تیر ۱۳۹۰ - ۱۶:۱۷

    فونت رو کنار فایل css بزارید و بصورت زیر فراخوانی کنید :
    src: url('DastNevis.OTF');

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    pep30 - Saeed Fard - Omid Sh

  • pep30

    آفلاین
    عضو
    تعداد نوشته‌ها: ۸۴
    تشکر شده: ۲۴ بار
    # نوشته شده: ۱۳ سال پیش
    ۲۹ تیر ۱۳۹۰ - ۱۷:۴۶

    مرسی اما بازم نمیشه ... تغییری نمیکنه!!!
    علتش چیه ؟

    این کل کد CSS هست »

    /*
Theme Name: Notepad-Orange-Stripe
Author URI: http://ithemes.com
Version: 1.0.4
Author: iThemes
Description: Notepad Theme is a simple website CMS theme for professionals, like business coaches and consultants.

Copyright (c) 2009 iThemes Media, LLC.
See license.txt for terms and conditions.
See history.txt for version history.
*/

html, body { margin: 0; padding: 0; }

body {
	background: #ffffff url(images/background.gif) top center repeat-x;
	color: #666;
	font-size: 12px;
	font-family: DastNevis.OTF;
	text-align: center;
	margin: 0px; padding: 0px 0px 0px 0px;
}

body * {margin: 0px; padding: 0px;}

@font-face {
font-family: DastNevis;
src: url('DastNevis.OTF');
}
/*********************************************
		Link Styles
*********************************************/
a {
	color: #2255AA;
	text-decoration: underline;
}

a:hover { color: #333; text-decoration: none; }

/*********************************************
		Text Elements
*********************************************/
p, ul, ol, blockquote {color: #666;}
ol, ul {
	margin: 5px 35px;
}
blockquote {
	margin: 5px 0px 5px 10px;
	padding: 0px 0px 0px 10px;
	border-left: 1px solid #999;
}
img { border: 0px; background: none; padding: 0px 10px 5px 0px; }
p {
	padding: 10px 0px;
	margin: 0px;
	line-height: 20px;
}
.clearfix:after { content: "."; display: block; clear: both; margin: 0px; padding: 0px; height: 0; visibility: hidden; }

/*********************************************
		Header Styles
*********************************************/
h1 { /* This style used as title on single posts and pages */
	padding: 5px 0px 0px 0px;
	margin: 0px;
	color: #2255AA;
	font-size: 10px;
	font-family: DastNevis.OTF;
	font-weight: normal;
	text-decoration: none;
	text-align: center;
}
h1 a {
	color: #2255AA;
	text-decoration: none;
}
h2 { /* This style used as header in the sidebars */
	color: #202020;
	font-size: 12px;
	font-family: DastNevis.OTF;
	font-weight: bold;
	padding: 10px 0px 3px 0px;
	margin: 0px 0px 5px 0px;
	border-bottom: double #C0C0C0;
}
h3 { /* This style used as the post titles on homepage/archive */
	color: #2255AA;
	font-size: 24px;
	font-family: DastNevis.OTF;
	font-weight: normal;
	padding: 10px 0px 5px 0px;
	margin: 0px;
	text-decoration: none;
	text-align: right;
}
h3 a {
	color: #2255AA;
	text-decoration: none;
}
h3 a:hover {
	color: #333;
	text-decoration: none;
}
h4 { /* This style used as title for comments and as the identifying header on archive page  */
	font-family: DastNevis.OTF;
	font-size: 18px;
	padding: 10px 0px 5px 0px;
	margin: 0px;
	color: #666;
	text-decoration: none;
	clear: both;
}
h5 { /* This style used as header in the sidebars */
	color: #202020;
	font-size: 12px;
	font-family: DastNevis.OTF;
	font-weight: bold;
	padding: 10px 0px 3px 0px;
	margin: 0px 0px 5px 0px;
	border-bottom: double #C0C0C0;
	text-align: center;
}

/*********************************************
		Header Div Styles
*********************************************/
#toptag {
	display: block;
	background: #000;
	color: #fff;
	margin: 0px auto; padding: 10px;
	text-align: center;
	letter-spacing: 6px;
	text-transform: uppercase;
}
#header {
	display: block;
	width: 654px;
	margin: 0px auto; padding: 25px 0px 0px 0px;
	text-align: right;
}
#header #title {
	color: #000;
	font-size: 30px;
	font-family: DastNevis.OTF;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
	margin: 5px 0px 10px 0px;
	color: #666;
	text-decoration: none;
	text-align: center;
}
#header #title a {
	color: #000;
	text-decoration: none;
}
#header #title a:hover {
	color: #333;
	text-decoration: none;
}
#header #tagline {
	font-size: 13px;
	font-family: DastNevis.OTF;
	font-weight: bold;
	color: #333;
	padding: 3px 0px 3px 0px;
	margin: 0px;
	text-align: center;
	letter-spacing: 5px;
	text-transform: uppercase;
}
#menu {
	list-style-type: none;
	text-align: center;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	margin: 20px 0px 20px 0px; padding: 0px;
}
#menu li {
	margin: 0px; padding: 7px 15px;
	display: inline;
}
#menu li a {
	color: #fff;
	text-decoration: none;
}
/* if you want to set a "current page item" style, do it here */
#menu li.current_page_item a, #menu li.current_page_item a:visited {
	color: #fff;
	text-decoration: none;
}
#menu li a:hover {
	color: #000;
	text-decoration: none;
}

/*********************************************
		Container Div / Wrap Div
*********************************************/
#container {
	text-align: right;
    margin: 0px auto;
    width: 654px;
    padding: 0px;
}
#wrap {
    margin: 0px; padding: 0px;
    width: 654px;
}

/*********************************************
		Content Div
*********************************************/
#content {
	background: #FFF;
	float: right;
	margin: 0px;
	padding: 15px;
    width: 622px;
	border: 1px solid #CCC;
	display: block;
}
#content img.featureimg {
	float: left;
	margin: 0px; padding: 0px 10px 10px 0px;
}
.post-more { /* Use this class to style the "more" tag */
}
.post-more a, .post-more a:visited { /* Use this class to style the link within the post-more div */
}

/*********************************************
		Post Meta Styles
*********************************************/
.meta-top {
	clear: both; /* we need this so floats in the post are cleared */
	padding: 0px;
	margin: 0px;
}

.meta-top p {
	font-family: DastNevis.OTF;
	font-size: 11px;
	text-transform: uppercase;
	margin: 15px 0px 0px 0px; padding: 0px;
	text-align: center;
}
.meta-bottom {
	clear: both; /* we need this so floats in the post are cleared */
	padding: 5px; margin: 0px;
}
.meta-date {
	margin: 0px 5px;
}
.meta-author {
	margin: 0px 5px;
}
.meta-comments {
	margin: 0px 5px;
}
.meta-category {
	margin: 0px 5px;
}

/*********************************************
		Previous/Next Page Navigation
*********************************************/
.page-nav {
	clear: both; /* To clear any floats */
	margin: 10px 0px;
	padding: 10px 0px;
}
.nav-previous {
	width: 249px;
	float: left;
	text-align: right;
}
.nav-next {
	width: 249px;
	float: right;
	text-align: left;
}

/*********************************************
		Left Sidebar
*********************************************/
#l_sidebar {
	color: #666;
	display: block;
	float: right;
	width: 285px;
	margin: 10px 0px 10px 0px; padding: 10px 10px 5px 20px;
	display: block; /* floats are handled as block elements, this is to fix
						a margin collapsing bug in IE */
}
#l_sidebar p, #l_sidebar .text-widget {
	padding: 0px 0px 5px 0px;
}
#l_sidebar img {
	text-align: center;
}
#l_sidebar form {
	padding: 0px;
	margin: 5px 0px;
}
#l_sidebar ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
#l_sidebar ul li {
	padding: 0px 0px 10px 0px;
}
#l_sidebar ul li.item {
	padding: 0px 0px 10px 0px;
	display: block;
	float: left;
}
#l_sidebar ul li ul {
	padding: 0px 0px 0px 15px;
	list-style-type: square;
}
#l_sidebar ul li ul li {
	padding: 0px;
	margin: 6px 0px;
}
#l_sidebar ul li ul li a {
	color: #2255AA;
	text-decoration: none;
}
#l_sidebar ul li ul li a:hover {
	color: #333;
	text-decoration: underline;
}
#l_sidebar ul li ul li ul {
	padding: 0px;
	margin: 0px;
}
#l_sidebar ul li ul li ul li {
	padding: 0px;
	margin: 5px 10px 5px 5px;
}

/*********************************************
		Right Sidebar
*********************************************/
#r_sidebar {
	color: #666;
	display: inline;
	float: right;
	width: 285px;
	margin: 10px 0px 10px 0px; padding: 10px 10px 5px 20px;
	display: block; /* floats are handled as block elements, this is to fix
						a margin collapsing bug in IE */
}
#r_sidebar p {
	padding: 0px 0px 5px 0px;
}
#r_sidebar img {
	text-align: center;
}
#r_sidebar form {
	padding: 0px;
	margin: 5px 0px;
}
#r_sidebar ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
#r_sidebar ul li {
	padding: 0px 0px 10px 0px;
}
#r_sidebar ul li.item {
	padding: 0px 0px 10px 0px;
	display: block;
	float: left;
}
#r_sidebar ul li ul {
	padding: 0px 0px 0px 15px;
	list-style-type: square;
}
#r_sidebar ul li ul li {
	padding: 0px;
	margin: 6px 0px;
}
#r_sidebar ul li ul li a {
	color: #2255AA;
	text-decoration: none;
}
#r_sidebar ul li ul li a:hover {
	color: #333;
	text-decoration: underline;
}
#r_sidebar ul li ul li ul {
	padding: 0px;
	margin: 0px;
}
#r_sidebar ul li ul li ul li {
	padding: 0px;
	margin: 5px 10px 5px 5px;
}

/*********************************************
		Comment Styles
*********************************************/
#comments {
	padding: 8px;
}
#comments .even {
	margin: 5px 0px 5px 0px;
	padding: 10px;
	background: #FFFFFF;
	overflow: hidden;
	border-bottom: 1px dotted #B7B7B7;
}
#comments .odd {
	margin: 5px 0px 5px 0px;
	padding: 10px;
	background: #FFFFFF;
	overflow: hidden;
	border-bottom: 1px dotted #B7B7B7;
}
#commentform textarea,
#commentform input {
	font-family: DastNevis.OTF;
	font-size: 14px;
	line-height: 17px;
}

/*********************************************
		Footer Styles
*********************************************/
#footer {
	width: 654px;
	color: #666;
	margin: 0px auto;
	padding: 15px 0px;
	clear: both;
	text-align: left;
	font-size: 11px;
	line-height: 14px;
	border-top: 1px solid #C0C0C0;
}
#footer a {
	color: #666;
	text-decoration: none;
}
#footer a:hover {
	color: #000;
	text-decoration: underline;
}
#footer .left {
	width: 40%;
	float: left;
	margin: 0px 0px 0px 20px;
}
#footer .right {
	width: 40%;
	float: right;
	text-align: right;
	margin: 0px 20px 0px 0px;
}

/*********************************************
		The Obligatory WP Stuff
*********************************************/
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
.alignleft {
   float: left;
}
.alignright {
   float: right;
}
.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
}
.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

  • saeli

    آفلاین
    عضو
    تعداد نوشته‌ها: ۲۴۳
    تشکر شده: ۲۵۷ بار
    # نوشته شده: ۱۳ سال پیش
    ۲۹ تیر ۱۳۹۰ - ۱۸:۱۶

    خود فونت را در داخل پوشه ای بزار که فایل css در ان قرار دارد

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    Saeed Fard

  • pep30

    آفلاین
    عضو
    تعداد نوشته‌ها: ۸۴
    تشکر شده: ۲۴ بار
    # نوشته شده: ۱۳ سال پیش
    ۲۹ تیر ۱۳۹۰ - ۲۳:۳۰

    قبلا این کارو انجام دادم ... یه بار شد... اما دیگه نمیشه !

  • Saeed Fard

    آفلاین
    ناظم
    تعداد نوشته‌ها: ۹۸۲
    تشکر شده: ۱۶۱۵ بار
    # نوشته شده: ۱۳ سال پیش
    ۲۹ تیر ۱۳۹۰ - ۲۳:۳۸

    قبلا این کارو انجام دادم ... یه بار شد... اما دیگه نمیشه !

    دوست عزیز احتمالا استایل قبلیتون روی مرورگر ذخیره شده و همون قبلی لود میشه و خب تغییرات هم اعمال نمیشه .. cache مرورگر رو خالی کنید و با استفاده از Crtl+F5 استایل رو از نو از روی سرور فراخوانی کنید ..

    اگه مشکلی نباشه تغییرات اعمال میشه ..

    موفق باشید ../.

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    Omid Sh - pep30

درباره‌ی این موضوع



برچسب‌ها

هیچ برچسبی نیست.