18 Mar 2012

cara membuat font text halaman berbeda beda


Custom Fonts adalah, singkatnya, font-font khusus yg ditambahkan secara individual & bukan merupakan font-font default yg telah dikenal browser (database-nya tidak dimiliki browser). Custom fonts saat ini telah berjumlah ratusan, memiliki variasi yg bermacam-macam, unik, memiliki tema yg lebih khas daripada font biasa, serta dapat meningkatkan kualitas tampilan blog/web.

untuk font halaman seperti ini copy script di bawah ini dan pastekan di halaman kalian
<link href="http://fonts.googleapis.com/css?family=Sail" rel="stylesheet" type="text/css"></link>
<br />
<div class="post-body">
<span style="font-family: Sail,'Times New Roman'; font-size: 15px;">TULIS ARTIKEL DI SINI</span></div>


sseperti ini saja saya rasa sudah cukup tapi kalau ingin memodivikasi  bagian blog lihat keterangan di bawah ini:



This guide explains how to use the Google Web Fonts API to add web fonts to your pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.

Contents

A quick example

Here's an example. Copy and paste the following HTML into a file:
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html> 
 
Then open the file in a modern web browser. You should see a page displaying the following, in the font called Tangerine:
Making the Web Beautiful!
That sentence is ordinary text, so you can change how it looks by using CSS. Try adding a shadow to the style in the previous example:
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}
You should now see a drop shadow under the text:
Making the Web Beautiful!
And that's only the beginning of what you can do with the Web Fonts API and CSS.

Overview

You can start using the Google Web Fonts API in just two steps:
  1. Add a stylesheet link to request the desired web font(s):
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
  2. Style an element with the requested web font, either in a stylesheet:
    CSS selector {
      font-family: 'Font Name', serif;
    }
    
    or with an inline style on the element itself:
    <div style="font-family: 'Font Name', serif;">Your text</div>

This guide explains how to use the Google Web Fonts API to add web fonts to your pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.

Contents

A quick example

Here's an example. Copy and paste the following HTML into a file:
   <html>
   <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
    body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>
Then open the file in a modern web browser. You should see a page displaying the following, in the font called Tangerine:
 That sentence is ordinary text, so you can change how it looks by using CSS. Try adding a shadow to the style in the previous example:
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}
You should now see a drop shadow under the text:
 And that's only the beginning of what you can do with the Web Fonts API and CSS.

Overview

You can start using the Google Web Fonts API in just two steps:
  1. Add a stylesheet link to request the desired web font(s):
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
  2. Style an element with the requested web font, either in a stylesheet:
    CSS selector {
      font-family: 'Font Name', serif;
    }
    
    or with an inline style on the element itself:
    <div style="font-family: 'Font Name', serif;">Your text</div>

1 komentar:

:D

Ahlussunnah Wal Jama,ah