如何美化網頁文字(01)-[font-family]設定網頁文字格式 @ 雲橙雨林

0000標題003

現在網頁上充滿了圖片、影片、人們閱讀文字的內容愈來愈少了，但是文字還是在網頁裡是最基本的，可表達你想表達的事，雖然，圖片、影片的轉載，可以讓你少寫很多文字，但，文字的表達可以加強人們對於你的文章的想法和看法，我們來設定最基本的文字吧！！

同樣的！我先找了一篇文章...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙</title>
</head>

<body>
<h1>this is my font style</h1>
<p>The results of a survey published Friday showed that 70 percent of local salaried employees are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons. </p>
<p> According to the survey conducted by 360d, a local job bank, the majority of the respondents said their current situations do not allow them to get married. </p>
<p> Of these, 84 percent said they do not have enough savings and salaries, while 49 percent said their jobs are unstable. Another 41 percent answered in the multiple-choice questionnaire said that they have not met the right person. </p>
<p> Meanwhile, 58 percent of those polled said they need at least NT$1 million (US$33,343.3) in savings before they will decide to walk down the aisle(3), while 92 percent said money can help strengthen their romantic relationships. </p>
<p> About 53 percent of the single respondents said they are not ready for relationships now, citing the lack of money, the extra expenses needed when in a relationship and being too busy with work as their reasons. </p>
<p>Wesley Yang, a manager at the job bank, said that in light of the weak economy, many moonlighters(4) have arranged plans to a little extra cash on Chinese Valentine's Day, which falls on the seventh day of the seventh month on the lunar calendar, or Aug. 23, this year. </p>
<p>These moonlighting jobs include delivering flowers, queuing up for restaurants or buying gifts on behalf of clients, working as housekeepers at hotels and even as professional huggers who provide hugs on the streets to single people on Valentine's Day, Yang said. </p>
<p>The survey collected 2,051 valid samples from July 31-Aug. 13. It had a margin of error of 3 percentage points and a confidence level of 95 percent. </p>
</body>
</html>

文章的內容是找網路的英文文章，內容是什，橙子不做解釋（因為看不懂，也不是重點呵呵）先看不加入css之前的樣子吧！

2012-09-28_112659

<h1>的部份會變成粗體字，是因為本來<h1>標籤預設就是粗體的了，而且字體也會放大。

橙子開始來做基本的文字設定了，在<h1>加入css

<style type="text/css">
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}
</style>

我們設定css，"font-family"就是設定網頁文章字體，我設為 arial, Helvetica, sans-serif，他是有順序性的也就是說，如果，「使用者的電腦」沒有arial的字體，就會用Helvetica的字體，如果「使用者的電腦」沒有，就會用sans-serif的字體，而為什要強調「使用者的電腦」，也就是網頁並非給自己使用，而是要提供給他人使用，而如果使用電腦沒有該字體，就無法顯示你要的效果，反而適得其反，所以，在中文中，也就只有建議用標楷體和新細明體二種字體可以使用，如果沒有必要，不要自作聰明，弄了一堆字體，在自家的電腦可以，那純屬自high 用，因為，別人是看不到的，所以這些是要特別注意的。

而真的無法解決這樣的問題嗎？難到我只能用那醜醜的細明體和標楷體嗎？其實不然，你可以用圖片來表示，也可以用javascript，亦可用css3的方式來外掛文字，而這些方式，等之後寫到，也可一一說明，但現在就說最基本的方式吧！

我們來看看結果：

2012-09-28_113956