บันทึกไว้ก่อนที่จะลืม
1. ต้องมีฟอนท์ที่ผ่านกระบวนการปรับแ่ต่งแล้ว
โหลดได้ที่นี่ http://goo.gl/Y3RhF
หรือ ทำได้เองที่ http://www.fontsquirrel.com/fontface/generator
2. สมุดว่าเรามี web application แล้วและเราต้องการเปลี่ยนฟอนท์ที่เราต้องการ
3. ให้โหลดฟอนท์ ในข้อเหนึ่งไปเก็บไว้ในระดับเดียวกับ Site/assest/stylesheets เพื่อให้เรียกใช้ได้จาก folder เดียวกัน
4. สมมุติ ไฟล์ที่เก็บ css เช่นในที่นี้คือ demo2-bootstrap.css.scss.css. หากเราแก้ไข ทีไฟล์นี้เป็นการ overide ที่เรา import bootstrap เข้ามา
5. ตัวอย่าง ไฟล์ที่เราต้องปรับแต่งstylesheet
@import "bootstrap";
@import "bootstrap-responsive";
//------------------------ ส่วนนี้เราต้องการให้ การแสดงผลใน body เป็นอักษา ไทยสารบรรณ----
body{
font-family: 'sp_laksamanbook';
background: white;
}
//-----------------------------------------------------------------------
@font-face {
font-family: 'sp_laksamanbook';
src: url('splaksaman-webfont.eot');
src: url('splaksaman-webfont.eot?#iefix') format('embedded-opentype'),
url('splaksaman-webfont.woff') format('woff'),
url('splaksaman-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotoregular';
src: url('roboto-regular-webfont.eot');
src: url('roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('roboto-regular-webfont.woff') format('woff'),
url('roboto-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotobold';
src: url('roboto-bold-webfont.eot');
src: url('roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('roboto-bold-webfont.woff') format('woff'),
url('roboto-bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'waree_sansbook';
src: url('wareesans-webfont.eot');
src: url('wareesans-webfont.eot?#iefix') format('embedded-opentype'),
url('wareesans-webfont.woff') format('woff'),
url('wareesans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'waree_sansbold';
src: url('wareesans-bold-webfont.eot');
src: url('wareesans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('wareesans-bold-webfont.woff') format('woff'),
url('wareesans-bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'dejavu_sans_mono_thaibook';
src: url('dejavusansmonothai-webfont.eot');
src: url('dejavusansmonothai-webfont.eot?#iefix') format('embedded-opentype'),
url('dejavusansmonothai-webfont.woff') format('woff'),
url('dejavusansmonothai-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.navbar-inner {
border-radius: 0px;
}
h1 + ul, h1 + div {
margin-top: 10px !important;
}
ul.main-list {
padding: 0px 8px;
margin: 0px;
background: #eee;
border: 1px solid #ccc;
list-style-type: none;
li {
margin: 8px 0px;
span {
padding: 8px;
}
background: white;
border-radius: 4px;
box-shadow: 0px 2px 3px #666;
}
}
----------------------------
บันทึกช่วยจำ
1. แก้ไขระยะห่างระหวางบันทึกของไฟล์ได้ที่ไฟล์ speciment_stylesheets.css บันทัดที่ 18
body {line-height: 1.6;}
