تغییر فونت
بنام خدا
سلام،
در این قسمت به درخواست یکی از دوستان نحوه تغییر فونت برنامه رو آموزش میدم:
ابتدا کد زیر رو در تگ 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 درون پروژتون قرار بدید
http://www.esfandune.ir/wp-content/uploads/2013/04/scr1.png (http://www.esfandune.ir/wp-content/uploads/2013/04/scr1.png)
نکته مهم اینه که فونت ها باید با سه پسوند eot,ttf,woff در داخل پوشه قرار بگیرند.
خوب تا اینجا تمام متن هایی که با h2 و h3 تگ خورده باشند فونتشون عوض میشه.
حالا بریم سراغ اینکه یه صفحه تنظیمات واسه سایز فونت ها درست کنیم
ابتدا کد زیر رو در تگ head تون قرار بدین
<script>
function loadtxt(names) {
$("#matn").html('لطفا چند لحظه صبر کنید<br><br><br><br><br><br><br><br><br><br><br><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%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84-_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1-%D9%81%D9%88%D9%86%D8%AA/