如何設定HTML頁面中文字的字型

字型屬性介紹

CSS中的字型屬性是幹什麼的呢？字型字型肯定和字型有關咯，就是設定HTML頁面中文字的字型，
CSS中常用的字型屬性有幾種呢，筆者給大家梳理了下，比較常用的一共有5種，今天我們就看看這5種能給文字的字型帶來什麼效果呢。
CSS 字型屬性定義文字的字體系列、大小、加粗、風格（如斜體）。
在CSS中常用的字型屬性有5種，如：font-style、font-weight、font-size、font-family、font。

font-style設定斜體

font-style屬性主要是給文字設定斜體用的。

font-style屬性使用表

值	描述
normal	將斜體字型恢復正常。
italic	設定字型為斜體。

讓我們進入font-style屬性的實踐，實踐內容如：將HTML頁面中的p標籤的文字字型設定為斜體。
假如我們不使用font-style屬性,可不可將p標籤中的文字字型設定為斜體呢？，如果大家學習HTML還可以，應該知道在HTML當中有一個i標籤，i標籤的作用就是將文字的字型設定為斜體，自帶的功能。
有點囉嗦了哈，給初學者普及下細節哦。
程式碼塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>設定字型為斜體</title>
</head>
<body>
    <p>成功不是打敗別人，而是改變自己。</p>
    <p><i>成功不是打敗別人，而是改變自己。</i></p>
</body>
</html>

結果圖

注意：使用font-style屬性可以將i標籤自帶的斜體功能給去除掉，如：下面關鍵程式碼哦。

    <style>
        i{
            font-style: normal;
        }
    </style>

使用font-style屬性設定文字的字型為斜體。
程式碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>設定字型為斜體</title>
</head>
    <style>
        p{
            font-style: italic;
        }
    </style>
<body>
   <p>成功不是打敗別人，而是改變自己。</p>
</body>

</html>

結果圖

font-weight設定字型粗細

font-weight屬性是用來設定文字的字型粗細。

font-weight屬性說明表

屬性值	描述
normal	將文字的粗細恢復為正常。
bold	字型加粗。
100到900	字型加粗

讓我們進入font-weight屬性實踐，內容將HTML頁面中的p標籤文字字型加粗，筆者使用class屬性值為.box將第一個p標籤文字字型加粗為900，為什麼用class屬性值為.box呢，方便初學者理解，其餘的都是一樣的，就不過多的說明了。
程式碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>設定字型粗細</title>
</head>
    <style>
        .box{
            font-weight:900;
        }
    </style>
<body>
   <p class="box">成功不是打敗別人，而是改變自己。</p>
    <p>成功不是打敗別人，而是改變自己。</p>
</body>

</html>

結果圖

font-size設定字型大小

font-size屬性就是設定文字的字型大小，由於font-size屬性值比較單一，就不用font-size屬性說明表解釋了，font-size屬性值是px為單位。
讓我們進入font-size屬性的實踐，實踐內容如：將HTML頁面中的p標籤文字字型大小設定為14畫素。
程式碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>設定字型大小</title>
</head>
    <style>
        p{
            font-size: 14px;
        }
    </style>
<body>
   
    <p>成功不是打敗別人，而是改變自己。</p>
</body>

</html>

結果圖

font-family 設定字型

font-family屬性給文字的字型設定風格，如：微軟雅黑、楷體、宋體....
園友都看到這裡了，相信大家都有了一定的自學能力了，就不多介紹了，直接上關鍵的程式碼了，大家可以自己嘗試各種字型哈。
程式碼塊

font-family: "微軟雅黑";

注意：font-family屬性可以使用多個如：font-family: "微軟雅黑","宋體",....;
細節：一般很特殊的字型，網站上面都是使用圖片來表示。是否能顯示此字型是根據使用者電腦裡面是否對應的字型檔案，如果沒有該檔案就會顯示為宋體。

font字型設定的縮寫

縮寫屬效能夠同時給文字設定斜體、加粗、大小、字型，每一個值之間要使用逗號隔開，並且一定要有順序。
讓我們進入font字型設定縮寫實踐，實踐內容如：將p標籤中文字設定為斜體、加粗、大小、字型。
程式碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字型設定的縮寫</title>
</head>
    <style>
        p{
           font: italic 900 14px "微軟雅黑";
        }
    </style>
<body>
   
    <p>成功不是打敗別人，而是改變自己。</p>
</body>

</html>

結果圖

如何設定HTML頁面中文字的字型

字型屬性介紹 CSS中的字型屬性是幹什麼的呢？字型字型肯定和字型有關咯，就是設定HTML頁面中文字的字型， CSS中常用的字型屬性有幾種呢，筆者給大家梳理了下，比較常用的一共有5種，今天我們就看看這5種能給文字的字型帶來什麼效果呢。 CSS 字型屬性定義文字的字體系列、大小、加粗、風格（如斜體）。在CSS

將特殊字型新增到了html頁面中

1.首先，開啟電腦控制面板，搜尋“字型”，然後開啟 3.下面，我們來說重點！！！程式碼如下： <!DOCTYPE html> <html> <head>

html頁面中拍照和上傳照片那些事兒（二）

read itl 加載完成大小上傳照片那些事 cnblogs 設置新建本文為原創，轉載請註明出處： cnzt 文章：cnzt-p http://www.cnblogs.com/zt-blog/p/6895352.html 本文主要說下iOS上

HTML頁面中固定變量的用法

index.php title 開始中一 src .com 表示 init bsp <a href="index.php?m=search&c=index&a=init&typeid=&siteid=1&q={$title}

HTML頁面中JavaScript能獲取到的各種屏幕大小信息

windows 部分菜單 div markdown doc rip oct 寬度在HTML頁面中，通過JavaScript代碼訪問 window 對象，能夠獲取到很多表征屏幕大小的信息，下面列舉並加以區分。 window 對象中的屏幕信息 window.innerhei

在HTML頁面中加載js文件和css文件的方法

logs ext mar 頁面 document 文件 class link child 1.在HTML頁面加載js文件的方法： function loadScriptFile(filePath){ var script = document.createEle

[Winform-WebBrowser]-在html頁面中js調用winForm類方法

cti initial window row .html ebo tns 簡單 winform 在winform項目中嵌入了網頁，想通過html頁面調用後臺方法，如何實現呢？其實很簡單，主要有三部： 1、在被調用方法類上加上[ComVisible(true)]標簽

純html頁面中js如何獲得項目路徑

什麽執行 TP ans 時間完整獲得 .com ip地址 js,全稱javascript,不過雖然是以java開頭，不過與java一點關系都沒有。 js和java有如下區別: (1)js是瀏覽器端的語言，而java是服務器端的語言。 (2)js是動態語言,java是靜

Html頁面中select下拉列表框別樣用法，一個方法一勞永逸。

select 異步加載很多時候，我們寫from表單面，給select標簽賦值，都采用這種方式：1.MVC中設創建公共的分部視圖；2.直接在前臺面中，插入片段後臺代碼；今天我利用HTML5中的自定義屬性，結合JQ擴展方法，寫一個通用的JS方法，JS代碼如下： $.fn.SetSelect = funct

HTML頁面中資料的回顯功能

在第一種方式中：頁面回顯，點選detail，頁面詳情會顯示一個新的頁面。這個是通過連結將頁面連結過去的。同時這個連結還連結到了一個新的js檔案中。用去調取後端的介面。 { title : '操作',

tp5 html頁面中 if else 判斷

// 建議當判斷條件怎麼調也調不通時，列印一下 $data,因為它有可能是這樣的資料結構 array(5) { [0] => string(0) "" [1] => string(0) "" [2] => string(0) "" [3] =>

在html頁面中判斷本地app是否安裝並開啟

html中其實是無法判斷應用是否安裝，除非在webview中通過js bridge，這裡通過一種方式達到此目的。 1、編輯AndroidManifest.xml：主要是增加第二個<intent-filter>，myapp用來標識schema，最好能保證

ThinkPHP5 對html頁面中的url傳參操作

◆ 背景畢竟PHP開發的框架多數都會和前端頁面巢狀使用，而不同的框架升級多少都會有所變化，這畢竟是其中的一個知識點吧，在我找不到方法前，考慮的是隱藏域提交“ID”，然後後臺post處理取出此ID，

自動化生成專案中的html頁面(中)

1.如果我們需要在html-webpack-plugin外掛中傳引數，在模板中根目錄下的index.html模板中引用怎麼辦？我們可以在webpack.config.js檔案中寫入這麼一行程式碼：title:'webpack is good' webpac

jsp(out物件可以向html頁面中輸出）

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ page import="java

使用Ajax在HTML頁面中區域性重新整理頁面（左邊選單右邊頁面）

index.html<a href="javascript:void(0);" onclick="loadXMLDoc('member.html')">檢視使用者</a><div id="mainbody">歡迎登入！</div>

php 如何在HTML頁面中實現對資料庫表資料的增刪改查

　　上一篇詳細說明了如何將資料庫中的資料列印到html頁面上，本篇將介紹如何在HTML頁面的表格裡進行對資料庫內容的增刪改查還是借用上一篇的頁面，在此基礎上增加了操作按鈕：<!doctype html><html><head><meta charset="utf-8"

在HTML頁面中插入Flash

你的目的就是在web頁面上加入flash吧，那樣很簡單啊，你直接在html程式碼中新增相應的程式碼就可以了，僅這些，和.net無關。給你個完整的程式碼：<html><body bgcolor="gray"><div align="cen

根據地址獲取html頁面中的內容

private string GetHtml(string url) { // 獲取檔案 System.Text.Encoding en = System.Text.Encoding.GetEncoding("utf-8")

HTML頁面中的按鍵事件

導航一、通過event.keyCode來實現按鍵事件二、通過event.which來實現按鍵事件不同的瀏覽器可能對按鍵事件有不同的處理方式，這裡介紹兩種實現的方式

如何設定HTML頁面中文字的字型

字型屬性介紹

font-style設定斜體

font-style屬性使用表

font-weight設定字型粗細

font-weight屬性說明表

font-size設定字型大小

font-family 設定字型

font字型設定的縮寫

相關推薦