2. 程式人生 > >html / CSS 自定義字型font 自己設定好看的特效字型

html / CSS 自定義字型font 自己設定好看的特效字型

阿新 • • 發佈：2019-02-18

這篇文章的主題是CSS3屬性 ： @font-face

樓主很喜歡CSS3的一些新增屬性，給我們前端程式設計師帶來了非常很多福利，我們的頁面也可以做的更加的美觀。

直接放效果圖吧，因為程式碼較長，放在最下面了；

這裡寫圖片描述

關於瀏覽器的相容性問題

這裡寫圖片描述

Firefox、Chrome、Safari 以及 Opera 支援 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 型別的字型。

Internet Explorer 9+ 支援新的 @font-face 規則，但是僅支援 .eot 型別的字型 (Embedded OpenType)。

在這順便做個倡導： 全民抵制IE

( 不知道有木有用處 ~~o(>_<)o ~~ )

實用程式碼：

html

<body>

<div>
    <p class="cat1" style="margin-top: 50px;">個人喜歡的字型：你好啊！每天都要很開心噠！</p>
    <p class="sweet">個人喜歡的字型：你好啊！每天都要很開心噠</p>
    <p class="honey">個人喜歡的字型：你好啊！每天都要很開心噠！</p>
    <p class="flower"
 
>個人喜歡的字型：你好啊！每天都要很開心噠！</p>
    <p class="evil">個人喜歡的字型：你好啊！每天都要很開心噠！</p>
    <p class="blank">個人喜歡的字型：你好啊！每天都要很開心噠！</p>
    <p class="wing">個人喜歡的字型：你好啊！每天都要很開心噠！</p>
</div>

</body>

css

body{
    font-size: 18px;
}
div{
    width:650px;
    height
 
:500px;
    margin:50px auto;
    padding:40px 0;
    background: url("bg1.jpg") no-repeat;
    background-size: cover;
}

div>p{
    margin-left:155px;
}
@font-face {
    font-family: myCatF;
    src: url("font/catH.ttf")
}

.cat1{
    font-family: myCatF;
    color:#f00;
}

@font-face {
    font-family: mySweet;
    src: url("font/tiantian.ttf")
}

.sweet{
    font-family: mySweet;
    color:#FF891F;
}

@font-face {
    font-family: myHoney;
    src: url("font/heart.ttf")
}
.honey{
    font-family: myHoney;
    color:#FFE379;
}

@font-face {
    font-family: myFlower;
    src: url("font/tiantian.ttf")
}

.flower{
    font-family: myFlower;
    color:#0f0;
}

@font-face {
    font-family: Evil;
    src: url("font/evil.ttf")
}

.evil{
    font-family: Evil;
    color:#00FFF0;
}

@font-face {
    font-family: blank;
    src: url("font/blank.ttf")
}

.blank{
    font-family: blank;
    color:#1FD1FF;
}

@font-face {
    font-family: wing;
    src: url("font/wing.ttf")
}

.wing{
    font-family: wing;
    color:#AA00FF;
}

(・-・*)
暫定這樣，不忙了以後再來補充

相關推薦

html / CSS 自定義字型font 自己設定好看的特效字型

這篇文章的主題是CSS3屬性 ： @font-face 樓主很喜歡CSS3的一些新增屬性，給我們前端程式設計師帶來了非常很多福利，我們的頁面也可以做的更加的美觀。 直接放效果圖吧，因為程式碼較長，放在最下面了； 關於瀏覽器的相容性問題 Fir

HTML+JS+CSS自定義樹形選單

小編最近做專案的時候時常用到樹形選單（Treeview），一直用的是別人的外掛，但有時候不符合自己的頁面風格,修改樣式、圖示什麼的都不方便，所以在這裡我急寫個方便修改樣式什麼的。 下面開始... 應用到技術：JavaScript/Css/HTML IDA：VS 20

分針網——每日分享：CSS 自定義屬性：API 篇

css JQuery是一個非常優秀的js庫。 選擇元素 $( )裏可以填css選擇器 $(’.demo’).

為Html.EditorForModel自定義模版

cte cfg 下拉列表框 ref tle lis date mode 自定義模版 對於MVC視圖渲染來說，大家應該不會陌生，但對於模型的渲染，不知道是否聽說過，主要是說Model通過它屬性的相關特性(DataType,UIHint)來將它們自動渲染到View上，這是一個比

css 自定義滾動條

har scroll meta ram arr 底部 over con logs 我遇到的場景： 對於iframe窗口，自帶滾動條是整個窗口的大小。有時需要頂部或底部固定，則滾動條不應該觸碰到頂部或底部。 那麽首先打開iframe時應該去掉滾動條 scrolling="no

css自定義滾動條樣式，自定義文字選擇樣式，設置文字不被選擇

sed 分享 play gpo radi https cal hid 右移 ::-webkit-scrollbar 滾動條整體部分 ::-webkit-scrollbar-thumb 滾動條裏面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）

初識css自定義屬性

這算是一篇兩篇文章譯文的糅合體，旨在幫助理解css自定義屬性。 今天，CSS前處理器是Web開發的標準。 前處理器的一個主要優點是它們使您能夠使用變數， 這有助於您避免複製和貼上程式碼，並簡化了開發和重構。 在本文中，您將瞭解到如何將CSS變數整合到CSS開發工作流程中，這會使得樣式表更易於維護

微信公眾號自定義選單裡如何設定“歷史訊息”？

2016年1月18日，騰訊在北京釋出訊息稱，中國政務微信公號已逾10萬。2018年6月6日，微信宣佈公眾號讚賞功能升級為“喜歡作者”，讀者可以直接向原創文章作者進行讚賞。2018年6月27日，微信官方宣佈，微信公眾平臺上線開放轉載功能，而轉載文章也可以讚賞作者了。 微信公眾號的一次次升級

CSS自定義select選擇框樣式（右側下拉箭頭）

如圖：自定義select的箭頭樣式  HTML以及CSS程式碼如下： <select class="form_select"> <option value="0">請選擇</option> <option value=

html+js自定義顏色選擇器

選擇 wid htm borde 效果圖 html () alt mage <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>test&

迅捷CAD工具箱-自定義命令快捷鍵設定

我們在使用AUTOCAD的時候，為了更加快速方便的製圖，就要載入迅捷CAD工具箱來輔助使用。那麼你是否知道，我們可以按照自己的喜好，自定義進行命令快捷鍵設定，讓我們的製圖工作變得更加的簡單方便！對，我們在迅捷CAD工具箱裡就可以進行這一設定。下面就給大家演示一下，使用迅捷CAD工具箱來自定義命令快捷鍵設定。具

jquery獲取html標籤自定義屬性值或data值

//獲取屬性值 1 <div id="text" value="黑噠噠的盟友"><div> jquery取值： $("#text").attr("value"); //獲取自定義屬性值 2 <div id="text" value

html+css3自定義button樣式

原生的按鈕有點醜，為此需要改裝一下樣式，達到適應頁面或者美化的作用，下面的連線是用input做按鈕和button做按鈕的區別，有興趣的可以看看。 https://blog.csdn.net/u010458114/article/details/79371304 先上效果圖： h

微信自定義分享連結（設定標題+簡介+圖片）

$(function() { //對url進行編碼 var localUrl = encodeURIComponent(location.href.split('#')[0]); //url傳到後臺格式 var Url = "URL=" +localUrl; //這幾

純CSS自定義瀏覽器滾動條

先看效果，大家按需求自行修改 具體程式碼： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" con

CSS自定義滑鼠指標樣式

原文連結: http://davidwalsh.name/css-custom-cursorDemo地址: http://davidwalsh.name/demo/css-custom-cursor.php原文日期: 2014-09-16翻譯日期: 2014-09-17翻譯人

Android下OkHttp請求自定義HTTPS證書介面設定

在請求安全性高的介面時，我們可能會使用到HTTPS介面，HTTPS可以理解為HTTP+TLS，關於HTTPS具體是怎麼工作的，可以看這篇文章：http://gold.xitu.io/entry/56ef

IntelliJ IDEA程式碼提示快捷鍵以及自定義程式碼補全設定

一、快捷鍵風格 通過設定Keymap把快捷鍵風格設定成Eclipse風格。 File –> Settings –> Keymap –> 下拉選單選擇Eclipse –> OK 二、程式碼自動提示快捷鍵 IntelliJ IDE

CentOS新增自定義系統服務並設定開機自啟動

因為各種需要，需要在CentOS 啟動或重啟(reboot 命令)後，啟動常用服務。而不是手動一個個再啟動服務。1.建立服務檔案 系統服務新增路徑:  /usr/lib/systemd/system/ 服務安裝路徑:        &nbs

Pytorch自定義網路結構+讀取自己資料+自定義Loss 全過程程式碼示例

1、限定使用GPU的序號import os os.environ['CUDA_VISIBLE_DEVICES'] = '3' os.system('echo $CUDA_VISIBLE_DEVICES')2、匯入相關標頭檔案import torch import torch.