تغییر فونت
بنام خدا
سلام،
در این قسمت به درخواست یکی از دوستان نحوه تغییر فونت برنامه رو آموزش میدم:
ابتدا کد زیر رو در تگ head قرار بدین
<style type="text/css">
@font-face {
font-family: "BBadr";
src: url('Fonts/BBadr.eot');
src: url('Fonts/BBadr.ttf') format("truetype"),
url('Fonts/BBadr.eot?#iefix') format('embedded-opentype'),
url('BBadr.woff') format("woff");
font-style: normal;
}
@font-face {
font-family: "BYagut";
src: url('Fonts/BYagut.eot');
src: url('Fonts/BYagut.ttf') format("truetype"),
url('Fonts/BYagut.eot?#iefix') format('embedded-opentype'),
url('BYagut.woff') format("woff");
font-style: normal;
}
@font-face {
font-family: "BYekan";
src: url('Fonts/BYekan.eot');
src: url('Fonts/BYekan.ttf') format("truetype"),
url('Fonts/BYekan.eot?#iefix') format('embedded-opentype'),
url('BYekan.woff') format("woff");
font-style: normal;
}
h2 {
font-family: BYagut;
color: #000;
font-size:25px;
alignment-adjust:!important;
line-height:140%;
}
h3 {
font-family: BYekan;
color: #000;
font-size:25px;
alignment-adjust:!important;
line-height:140%;
}
* {
text-shadow: none;
box-shadow: none;
-webkit-box-shadow: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: none;
-webkit-user-select: none;
}
</style>
برنامه نویسی موبایل _تغییر فونت
بنام خدا
سلام،
در این قسمت به درخواست یکی از دوستان نحوه تغییر فونت برنامه رو آموزش میدم:
ابتدا کد زیر رو در تگ head قرار بدین
<style type="text/css"> @font-face { font-family: "BBadr"; src: url('Fonts/BBadr.eot'); src: url('Fonts/BBadr.ttf') format("truetype"), url('Fonts/BBadr.eot?#iefix') format('embedded-opentype'), url('BBadr.woff') format("woff"); font-style: normal; } @font-face { font-family: "BYagut"; src: url('Fonts/BYagut.eot'); src: url('Fonts/BYagut.ttf') format("truetype"), url('Fonts/BYagut.eot?#iefix') format('embedded-opentype'), url('BYagut.woff') format("woff"); font-style: normal; } @font-face { font-family: "BYekan"; src: url('Fonts/BYekan.eot'); src: url('Fonts/BYekan.ttf') format("truetype"), url('Fonts/BYekan.eot?#iefix') format('embedded-opentype'), url('BYekan.woff') format("woff"); font-style: normal; } h2 { font-family: BYagut; color: #000; font-size:25px; alignment-adjust:!important; line-height:140%; } h3 { font-family: BYekan; color: #000; font-size:25px; alignment-adjust:!important; line-height:140%; } * { text-shadow: none; box-shadow: none; -webkit-box-shadow: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: none; -webkit-user-select: none; } </style>
<style type="text/css">
@font-face {
font-family: "BBadr";
src: url('Fonts/BBadr.eot');
src: url('Fonts/BBadr.ttf') format("truetype"),
url('Fonts/BBadr.eot?#iefix') format('embedded-opentype'),
url('BBadr.woff') format("woff");
font-style: normal;
}
@font-face {
font-family: "BYagut";
src: url('Fonts/BYagut.eot');
src: url('Fonts/BYagut.ttf') format("truetype"),
url('Fonts/BYagut.eot?#iefix') format('embedded-opentype'),
url('BYagut.woff') format("woff");
font-style: normal;
}
@font-face {
font-family: "BYekan";
src: url('Fonts/BYekan.eot');
src: url('Fonts/BYekan.ttf') format("truetype"),
url('Fonts/BYekan.eot?#iefix') format('embedded-opentype'),
url('BYekan.woff') format("woff");
font-style: normal;
}
h2 {
font-family: BYagut;
color: #000;
font-size:25px;
alignment-adjust:!important;
line-height:140%;
}
h3 {
font-family: BYekan;
color: #000;
font-size:25px;
alignment-adjust:!important;
line-height:140%;
}
* {
text-shadow: none;
box-shadow: none;
-webkit-box-shadow: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: none;
-webkit-user-select: none;
}
</style>
خوب همونطور که تو کدها هم مشخصه شما باید فونت های لازم رو داخل یه پوشه به اسم Fonts درون پروژتون قرار بدید
نکته مهم اینه که فونت ها باید با سه پسوند eot,ttf,woff در داخل پوشه قرار بگیرند.
خوب تا اینجا تمام متن هایی که با h2 و h3 تگ خورده باشند فونتشون عوض میشه.
حالا بریم سراغ اینکه یه صفحه تنظیمات واسه سایز فونت ها درست کنیم
ابتدا کد زیر رو در تگ head تون قرار بدین
<script>
function loadtxt(names) {
$("#matn").html('لطفا چند لحظه صبر کنید<br><br><br><br><br><br><br><br><br><br><b r><br><br><br><br><br><br><br><br><br><br><br><br> ');
$("#matn").load('docs/' + names + '.txt');
}
$(document).ready(function(e) {
$("#slider-dua").change(function(e) {
var slider_value = $("#slider-0").val();
$("h2").css('font-size', parseInt(slider_value));
});
$("#slider-farsi").change(function(e) {
var slider_value = $("#slider-1").val();
$("h3").css('font-size', parseInt(slider_value));
});
$("#slider-farsi").change(function(e) {
var slider_value = $("#slider-1").val();
$("h3").css('font-size', parseInt(slider_value));
});
$("#farsiornot").change(function(e) {
// var slider_value = $("#slider-1").val();
if ($("#flipswitch").val()=="off"){
$("h3").css('display', 'none');
}
if ($("#flipswitch").val()=="on"){
$("h3").css('display', 'block');
}
});
});
</script>
اینم یه صفحه که قابلیت تنظیم سایز فونت رو میده
CSS
<div data-role="page" id="page3" data-theme="b"> <div data-role="header" style="background-image:url(katibeh_for_moharram_by_islamicwallpers. gif)" > <h1>تنظیمات</h1> <p> </p> <a href="#page2" data-role="button" data-transition="none" data-icon="arrow-l">بازگشت</a> </div> <div data-role="content" dir="rtl" role="main" data-theme="c" > <br> <br> <div id="slider-dua"> <label for="slider-0">فونت یک:</label> <input type="range" name="slider" id="slider-0" value="25" min="10" max="36" step="2" dir="ltr" /> </div> <div align="center"> <h2>فرهنگ عاشورا</h2></div> <div id="slider-farsi"> <label for="slider-0">فونت دو:</label> <input type="range" name="slider" id="slider-1" value="12" min="10" max="36" step="2" dir="ltr" /></div> <div align="center"> <h3>فرهنگ عاشورا</h3> </div> </div> <br><br><br><br><br> </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div data-role="page" id="page3" data-theme="b">
<div data-role="header" style="background-image:url(katibeh_for_moharram_by_islamicwallpers. gif)" >
<h1>تنظیمات</h1>
<p> </p>
<a href="#page2" data-role="button" data-transition="none" data-icon="arrow-l">بازگشت</a>
</div>
<div data-role="content" dir="rtl" role="main" data-theme="c" >
<br>
<br>
<div id="slider-dua"> <label for="slider-0">فونت یک:</label>
<input type="range" name="slider" id="slider-0" value="25" min="10" max="36" step="2" dir="ltr" />
</div>
<div align="center">
<h2>فرهنگ عاشورا</h2></div>
<div id="slider-farsi"> <label for="slider-0">فونت دو:</label>
<input type="range" name="slider" id="slider-1" value="12" min="10" max="36" step="2" dir="ltr" /></div>
<div align="center">
<h3>فرهنگ عاشورا</h3>
</div>
</div>
<br><br><br><br><br>
</div>
منبع:http://www.esfandune.ir/%D8%A8%D8%B1...8%D9%86%D8%AA/