نحوه تغییر فونت صفحات وب

HTML/XHTML

توسط fallout در 5 سال پیش
0 5.4k 19 3 سال پیش
ehsanerfanireza-irdevfalloutbehnamdesignerdanieltheknightrastinc0der
0

با سلام و خسته نباشید من تو خیلی از سایت ها دیدم که فونت صفحه رو عوض میکنن مثلا B Koodak میذارن لطفا راهنمایی کنید که چطور میشه این کارو انجام داد ممنون میشم

آخرین ویرایش: 29-11-2014 ساعت 17:27، توسط Reza
0

سلام اول باید فونت های خودتون رو به فونت های مخصوص وب تبدیل کنید [ میتونید از اینجا فونت های آماده دانلود کنید ] اگر فونت دلخواه شما وجود نداره از این سایت استفاده کنید [ Free online font converter ]

بعد در قسمت کد CSS این کد رو اضافه کنید (دقت کنید که ادرس فونت صحیح باشه)

@font-face {
  font-family: 'BYekan';
  src: url('BYekan.eot?#') format('eot'),
       url('BYekan.woff') format('woff'),
       url('BYekan.ttf') format('truetype');
}

و باز در قسمت CSS برای کلاس میتونید به این شکل استفاده کنید:

font-family: 'BYekan', Tahoma, Helvetica, sans-serif;

موفق باشید.

0

خیلی ممنونم من انجام دادم اما نشد میشه یه صفحه اماده برام بذارید؟

0

فونت های مورد نیاز رو در همین مسیری که فایل html رو میسازید قرار بدید

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@font-face {
  font-family: 'BYekan';
  src: url('BYekan.eot?#') format('eot'),
       url('BYekan.woff') format('woff'),
       url('BYekan.ttf') format('truetype');
}

div.softafzar
{
font-family: BYekan, Tahoma, Helvetica, sans-serif;
border-left: 0px solid #B8C4CA;
text-align: center;
color: #ECECEC;
line-height: 37px;
background: #3D9EC5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: 5px solid #000000;
margin-left: 10px;
padding: 7px 15px;
margin-top: 1px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
box-shadow: 3px 0px 15px 4px #CCCCCC;
text-shadow: 1px 1px #000000;
}
.softafzar:hover
{

border: 5px solid #148DA3;


}
</style>
</head>

<body>
<div align="center">
<div class="softafzar">
<p align="right">...در حال انتقال</p>
<p align="center">بازديد کننده گرامي شما تا چند لحظه ديگر سايت جديد ما انتقال داده  ميشويد</p>
<p align="center">;-)هر سوالي داريد ميتوانيد در سايت جديد مطرح کنيد و در کمترين زمان جواب بگيريد </p>
<p align="center">لطفا کمي صبر کنيد</p></div>
</body>
</html>
0

آقا دمت گرم خیلی وقت بود دنبالش بودم :kiss:

0

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@font-face {
  font-family:yekan;
  src: url(http://up.myb2.tk/up/beatfa2/font/BYekan.eot) format(eot),
       url(http://up.myb2.tk/up/beatfa2/font/BYekan.woff) format(woff),
       url(http://up.myb2.tk/up/beatfa2/font/BYekan.ttf) format(truetype);
}
p{
    font-family:yekan;
    font-size:18px;
    }

</style>
</head>

<body>
<center>
<p>سلام امیدوارم حال همگی خوب باشه</p>
</center>
</body>
</html>
0

> سلام من کد ها رو به این شکل قرار دادم توی تمام مرورگرها نشون میده ولی توی فایرفاکس نشون نمیده ، مشکل از کجاست؟ ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> @font-face { font-family:yekan; src: url(http://up.myb2.tk/up/beatfa2/font/BYekan.eot) format(eot), url(http://up.myb2.tk/up/beatfa2/font/BYekan.woff) format(woff), url(http://up.myb2.tk/up/beatfa2/font/BYekan.ttf) format(truetype); } p{ font-family:yekan; font-size:18px; } </style> </head> <body> <center> <p>سلام امیدوارم حال همگی خوب باشه</p> </center> </body> </html> ```

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

0

> سلام فونت ها باید در همون سرور باشه

درود

متوجه منظور شما نشدم

من فونت ها رو توی یه سایتی آپلود کردم و آدرس ها رو داخل کدها قرار دادم ولی فقط توی فارفاکس نشون نمیده

در ضمن من وبلاگ دارم یعنی هاست شخصی ندارم

0

ehsanerfani@ Daniel عزیز کاملا درست گفتن در ورژن های جدید فایر فاکس و IE فونت هایی که لود میکنید باید در همون سرور باشن در غیر اینصورت اگر Web console فایرفاکس رو باز کنید خطایی شبیه به این میبینید:

[13:49:43.340] downloadable font: download failed (font-family: "byekan" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed

مثلا اگر از blogfa استفاده میکنید فونت ها باید در همین سرور باشن و چون به هاست بلاگف دسترسی ندارید نمیتونید کاری بکنید اما یک ترفند! سعی کنید از قالب هایی که در اون سرویس اپلود شدن فونت مورد نظر رو مرورگر پیدا کرده و به اون لینک بدید (استفاده از Inspect element مرورگر خیلی کمک میکنه) موفق باشید.

0

> ehsanerfani@ Daniel عزیز کاملا درست گفتن در ورژن های جدید فایر فاکس و IE فونت هایی که لود میکنید باید در همون سرور باشن در غیر اینصورت اگر Web console فایرفاکس رو باز کنید خطایی شبیه به این میبینید: ``` [13:49:43.340] downloadable font: download failed (font-family: "byekan" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed ``` مثلا اگر از blogfa استفاده میکنید فونت ها باید در همین سرور باشن و چون به هاست بلاگف دسترسی ندارید نمیتونید کاری بکنید اما یک ترفند! سعی کنید از قالب هایی که در اون سرویس اپلود شدن فونت مورد نظر رو مرورگر پیدا کرده و به اون لینک بدید (استفاده از Inspect element مرورگر خیلی کمک میکنه) موفق باشید.

ممنون بابت کمکت ، ترفند خوبیه ، ولی به چه صورتی باید کدها رو وارد کنم؟ یعنی باید برم تو قسمت css قالب و فقط قسمت @font face رو کپی کنم و تو قالب خودم قرار بدم؟ نحوه ی کار به این صورته؟

0

درود از کدوم سرویس وبلاگدهی استفاده میکنی؟ معمولا فونتی که مدیران استفاده میکنن yekan هست.

یعنی باید برم تو قسمت css قالب و فقط قسمت @font face رو کپی کنم و تو قالب خودم قرار بدم؟


بله فقط ادرس فونت رو باید بصورت کامل وارد کنی مثل [url]http://blogfa.com/theme/ex/yekan.ttf[/url]
0

> درود از کدوم سرویس وبلاگدهی استفاده میکنی؟ معمولا فونتی که مدیران استفاده میکنن yekan هست. بله فقط ادرس فونت رو باید بصورت کامل وارد کنی مثل [url]http://blogfa.com/theme/ex/yekan.ttf[/url]

درود از سیستم blog.ir امتحان کردم نشد

0

پوسته ای سراغ داری که از این فونت در این سروی استفاده شده باشه؟ فونتی که در صفحه index سایت استفاده شده از کامپیوتر کاربر نمایش داده میشه یعنی اگه کسی فونت b traffic رو نصب داشته باشه براش نمایش داده میشه که روش درستی نیست

0

من این فونت ها رو در سرور شما پیدا کردم

@font-face {
        font-family: 'btraffic';
        src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BTraffic.eot?view'),
        src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BTraffic.eot?view#iefix') format('embedded-opentype'),
            url('http://cdn.bayan.ir/blog/templates/shared/fonts/BTraffic.woff?view') format('woff'),
            url('http://cdn.bayan.ir/blog/templates/shared/fonts/BTraffic.ttf?view') format('truetype');
    }
    @font-face {
        font-family: 'bnazanin';
        src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BNazanin.eot?view'),
        src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BNazanin.eot?view#iefix') format('embedded-opentype'),
            url('http://cdn.bayan.ir/blog/templates/shared/fonts/BNazanin.woff?view') format('woff'),
            url('http://cdn.bayan.ir/blog/templates/shared/fonts/BNazanin.ttf?view') format('truetype');
    }
    @font-face {
        font-family: 'bkoodak';
        src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BKoodakBold.eot?view'),
        src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BKoodakBold.eot?view#iefix') format('embedded-opentype'),
            url('http://cdn.bayan.ir/blog/templates/shared/fonts/BKoodakBold.woff?view') format('woff'),
            url('http://cdn.bayan.ir/blog/templates/shared/fonts/BKoodakBold.ttf?view') format('truetype');
    }

همچنین byekan:

@font-face {
        font-family: 'byekan';
        src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BYekan.eot?view'),
        src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BYekan.eot?view#iefix') format('embedded-opentype'),
            url('http://cdn.bayan.ir/blog/templates/shared/fonts/BYekan.woff?view') format('woff'),
            url('http://cdn.bayan.ir/blog/templates/shared/fonts/BYekan.ttf?view') format('truetype');
    }
0

> من این فونت ها رو در سرور شما پیدا کردم ``` @font-face { font-family: 'btraffic'; src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BTraffic.eot?view'), src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BTraffic.eot?view#iefix') format('embedded-opentype'), url('http://cdn.bayan.ir/blog/templates/shared/fonts/BTraffic.woff?view') format('woff'), url('http://cdn.bayan.ir/blog/templates/shared/fonts/BTraffic.ttf?view') format('truetype'); } @font-face { font-family: 'bnazanin'; src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BNazanin.eot?view'), src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BNazanin.eot?view#iefix') format('embedded-opentype'), url('http://cdn.bayan.ir/blog/templates/shared/fonts/BNazanin.woff?view') format('woff'), url('http://cdn.bayan.ir/blog/templates/shared/fonts/BNazanin.ttf?view') format('truetype'); } @font-face { font-family: 'bkoodak'; src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BKoodakBold.eot?view'), src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BKoodakBold.eot?view#iefix') format('embedded-opentype'), url('http://cdn.bayan.ir/blog/templates/shared/fonts/BKoodakBold.woff?view') format('woff'), url('http://cdn.bayan.ir/blog/templates/shared/fonts/BKoodakBold.ttf?view') format('truetype'); } ``` همچنین byekan: ``` @font-face { font-family: 'byekan'; src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BYekan.eot?view'), src: url('http://cdn.bayan.ir/blog/templates/shared/fonts/BYekan.eot?view#iefix') format('embedded-opentype'), url('http://cdn.bayan.ir/blog/templates/shared/fonts/BYekan.woff?view') format('woff'), url('http://cdn.bayan.ir/blog/templates/shared/fonts/BYekan.ttf?view') format('truetype'); } ```

درود دوست گرامی

خیلی ممنون بابت کمکی که کردید میشه بگید چجوری این آدرس ها رو پیدا کردین؟ ممنون

0

> درود دوست گرامی خیلی ممنون بابت کمکی که کردید میشه بگید چجوری این آدرس ها رو پیدا کردین؟ ممنون
سلام با استفاده از Inspect Element گوگل کروم
> درود لطفا این [[color=#0000FF]صفحه [/color]](http://up.myb2.tk/up/beatfa2/font/demo.html)رو ببینید بگید توی مرورگر شما فونت p yakn رو نشون میده یا نه؟

تو این صفحه شما هیچ استایلی تعریف نکردی حداقل یکی از اون فونت هایی که گذاشتم رو باید به استایل اضافه کنی بعد از فونت ها استفاده کنی مثل byekan شما اسم فونت رو هم اشتباه نوشتی P yekan اگر بنویسی b yekan فونت از کامپیوتر شما لود میشه و اگر وجود نداشته باشه بصورت arial میشه(the knight هم گفتن اینو)

0

> سلام با استفاده از Inspect Element گوگل کروم تو این صفحه شما هیچ استایلی تعریف نکردی حداقل یکی از اون فونت هایی که گذاشتم رو باید به استایل اضافه کنی بعد از فونت ها استفاده کنی مثل byekan شما اسم فونت رو هم اشتباه نوشتی P yekan اگر بنویسی b yekan فونت از کامپیوتر شما لود میشه و اگر وجود نداشته باشه بصورت arial میشه(the knight هم گفتن اینو)

دمت گرمممممممممممممم

0

سلام خیلی استفاده کردم ممنون میشه اینو هم بگین چرا بعضی اوقات اسم فونت رو تو کوتیشن میذارن؟

2

> سلام خیلی استفاده کردم ممنون میشه اینو هم بگین چرا بعضی اوقات اسم فونت رو تو کوتیشن میذارن؟  

اگر تو اسم فونت فاصله باشه مثل b yekan باید اونو تو کوت بذاری.

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید