1. web前端中引入的字體文件過大如何解決
要動態切換就做不到了。魚和熊掌不能兼得。
一般縮小網頁字體文件的方法就是把用到的那幾個字單獨的提煉出來。就是用不到的字不要放在字體文件里。需要你自己做一個字體文件。因為以前有寫過一個類似的工具,就是把字體中的字提煉出來。後來不幹這個了,文件也沒了。這是一個常用的工具,你在網上自己找一找應該能找到很多類似的開源項目。我當時用的方法是字型檔文件比如ttf轉換成svg字型檔,然後通過對應的字碼調用相應的svg矢量字型檔,然後刪除不需要的字體之後,再把svg轉換成woff,eot,ttf等字體的方式。
例子的話現在就沒有了。我只能給你說一下思路。希望對你有幫助。
——
像你提供的這個,如果就是一個展示,那麼你完全可以用上面的所說的方法把需要的那幾個字從字體文件里提出來,比如《字由棒棒體》,把那個字體提煉出來。
但是你要動態實現收入字體立馬就變,這種提煉方式就不方便了。更快的的方式就是把每一個字分別做成單獨的svg圖形,這樣利用一個字體對應svg字體,就可以不必一次性下載那麼大幾個M的文件了。畢竟一個字的SVG是很小的。
還有其他方案就是所有的字體做了CDN加速,本身字體文件雖然很大,但是幾個M的文件如果通過提高網速,也不是實現不了。這個就是技術解決不了,用錢來湊了,畢竟CDN加速也是很貴的。
2. 如何WEB中把字體加粗
我不太清楚你到底要做什麼,你貼出來的三段代碼,分別表示了三段不同的 區隔標記 ,而且後兩段都沒有結束區域的符號,三段中也沒有內容或文字,所以不知道你是想在哪一個區域把哪些文字加粗。
如果你是自己做網頁,使用HTML語言,Dreamweaver裡面的功能輕輕鬆鬆可以幫你實現你要的操作。
如果你是在瀏覽網頁是看人家的源代碼,你即使修改了,也只能在自己本地瀏覽啊,那何不用Dreamweaver打開更方便。
最後,認真回答你的問題。<DIV align="center"><FONT face="宋體"><strong>你要輸入的字</strong></FONT></DIV> 是沒錯的,「你要輸入的字」就是被加粗的部分,並在這個區域內被居中。
給你提供一些HTML代碼,自己研究下吧。
標記 類型 譯名或意義 作 用 備注
文件標記
<HTML> ● 文件聲明 讓瀏覽器知道這是 HTML 文件
<HEAD> ● 開頭 提供文件整體資訊
<TITLE> ● 標題 定義文件標題,將顯示於瀏覽頂端
<BODY> ● 本文 設計文件格式及內文所在
排版標記
<!--註解--> ○ 說明標記 為文件加上說明,但不被顯示
<P> ○ 段落標記 為字、畫、表格等之間留一空白行
<BR> ○ 換行標記 令字、畫、表格等顯示於下一行
<HR> ○ 水平線 插入一條水平線
<CENTER> ● 居中 令字、畫、表格等顯示於中間 反對
<PRE> ● 預設格式 令文件按照原始碼的排列方式顯示
<DIV> ● 區隔標記 設定字、畫、表格等的擺放位置
<NOBR> ● 不折行 令文字不因太長而繞行
<WBR> ● 建議折行 預設折行部位
字體標記
<STRONG> ● 加重語氣 產生字體加粗 Bold 的效果
<B> ● 粗體標記 產生字體加粗的效果
<EM> ● 強調標記 字體出現斜體效果
<I> ● 斜體標記 字體出現斜體效果
<TT> ● 打字字體 Courier字體,字母寬度相同
<U> ● 加上底線 加上底線 反對
<H1> ● 一級標題標記 變粗變大加寬,程度與級數反比
<H2> ● 二級標題標記 將字體變粗變大加寬
<H3> ● 三級標題標記 將字體變粗變大加寬
<H4> ● 四級標題標記 將字體變粗變大加寬
<H5> ● 五級標題標記 將字體變粗變大加寬
<H6> ● 六級標題標記 將字體變粗變大加寬
<FONT> ● 字形標記 設定字形、大小、顏色 反對
<BASEFONT> ○ 基準字形標記 設定所有字形、大小、顏色 反對
<BIG> ● 字體加大 令字體稍為加大
<SMALL> ● 字體縮細 令字體稍為縮細
<STRIKE> ● 畫線刪除 為字體加一刪除線 反對
<CODE> ● 程式碼 字體稍為加寬如<TT>
<KBD> ● 鍵盤字 字體稍為加寬,單一空白
<SAMP> ● 範例 字體稍為加寬如<TT>
<VAR> ● 變數 斜體效果
<CITE> ● 傳記引述 斜體效果
<BLOCKQUOTE> ● 引述文字區塊 縮排字體
<DFN> ● 述語定義 斜體效果
<ADDRESS> ● 地址標記 斜體效果
<SUB> ● 下標字 下標字
<SUP> ● 上標字 指數(平方、立方等)
清單標記
<OL> ● 順序清單 清單項目將以數字、字母順序排列
<UL> ● 無序清單 清單項目將以圓點排列
<LI> ○ 清單項目 每一標記標示一項清單項目
<MENU> ● 選單清單 清單項目將以圓點排列,如<UL> 反對
<DIR> ● 目錄清單 清單項目將以圓點排列,如<UL> 反對
<DL> ● 定義清單 清單分兩層出現
<DT> ○ 定義條目 標示該項定義的標題
<DD> ○ 定義內容 標示定義內容
表格標記
<TABLE> ● 表格標記 設定該表格的各項參數
<CAPTION> ● 表格標題 做成一打通列以填入表格標題
<TR> ● 表格列 設定該表格的列
<TD> ● 表格欄 設定該表格的欄
<TH> ● 表格標頭 相等於<TD>,但其內之字體會變粗
表單標記
<FORM> ● 表單標記 決定單一表單的運作模式
<TEXTAREA> ● 文字區塊 提供文字方盒以輸入較大量文字
<INPUT> ○ 輸入標記 決定輸入形式
<SELECT> ● 選擇標記 建立 pop-up 卷動清單
<OPTION> ○ 選項 每一標記標示一個選項
圖形標記
<IMG> ○ 圖形標記 用以插入圖形及設定圖形屬性
連結標記
<A> ● 連結標記 加入連結
<BASE> ○ 基準標記 可將相對 URL 轉絕對及指定連結目標
框架標記
<FRAMESET> ● 框架設定 設定框架
<FRAME> ○ 框窗設定 設定框窗
<IFRAME> ○ 頁內框架 於網頁中間插入框架 IE
<NOFRAMES> ● 不支援框架 設定當瀏覽器不支援框架時的提示
影像地圖
<MAP> ● 影像地圖名稱 設定影像地圖名稱
<AREA> ○ 連結區域 設定各連結區域
多媒體
<BGSOUND> ○ 背景聲音 於背景播放聲音或音樂 IE
<EMBED> ○ 多媒體 加入聲音、音樂或影像
其他標記
<MARQUEE> ● 走動文字 令文字左右走動 IE
<BLINK> ● 閃爍文字 閃爍文字 NC
<ISINDEX> ○ 頁內尋找器 可輸入關鍵字尋找於該一頁 反對
<META> ○ 開頭定義 讓瀏覽器知道這是 HTML 文件
<LINK> ○ 關系定義 定義該文件與其他 URL 的關系
StyleSheet
<STYLE> ● 樣式表 控制網頁版面
<span> ● 自訂標記 獨立使用或與樣式表同用
註:
● 表示該標記屬圍堵標記,即需要關閉標記如 </標記>。
○ 表示該標記屬空標記,即不需要關閉標記。
IE 表示該標記只適用於 Internet Explorer。
NC 表示該標記只適用於 Netscape Communicator。
反對 表示該標記不為 W3C 所贊同,通常這標記是 IE 或 NC 自訂,且己為眾所支 持,只是 HTML 標准中有其它同功能或更好的選擇。
棄用 表示該標記己為 W3C 所棄用,是過時的標記,但 HTML 具向下兼容的特 性,不用擔心新瀏覽器不支援舊標記。
新 表示該標記是 HTML 4.0 中新增的。
3. 在web中如何設置字體的大小和顏色,語法是什麼時候
首先font是一對常規標簽,將字體文本內容放入標簽內,font標簽內設置color顏色+對應顏色值即可設置font標簽對象內字體顏色。
4. javaweb項目怎麼修改網頁字體大小
使用css,例如]
<a style="font-size:16px;">16px的字體大小</a>
<a style="font-size:10px;">10px的字體大小</a>
可以把a標簽改成是div的標簽,這樣在div裡面的字體都會是默認該大小了,如:
<div style="font-size:16px;">16px的字體大小
<a href="#">這里的字體也是16px</a>
<a style="font-size:10px;">呵呵,這個不是默認的16px大小了,而是10px大小</a>
</div>
5. web前端為什麼字體大小設置不了
可以設置。
1、NO1使用em在我的一些網頁設計中對字體的設置很少有看到pt或者px類的單位,我想使用百分比或者相對的方式比較好,首先我想我們應該在body裡面設置一個字體為百分比的單位,然後再在下文使用em值,這樣能夠避免很多的麻煩。2、能夠避免當我們設計流動布局時習慣性的把字體設置為固定顯示值。3、字體的一致性,和相對性,能夠突出顯示我們想要表達的內容。
還有一種是讓用戶可以自己來切換,這樣對用戶體驗來說大大提高,對於某些瀏覽器來說,切換樣式是內置的,但這類瀏覽器中卻並沒有IE的身影。所以為了可讓用戶可以切換文字的大小,在頁面中我們必須加入相應的控制腳本。
6. web前端怎麼設置字體
<h1
style="
font-family:"微軟雅黑";font-size:20px;color:red;
">標題的字體設置</h1>
上面用的內聯樣式設置了
文字內容的字體類型是:「微軟雅黑」,字體大小20像素,顏色為紅色。
7. web前端怎麼用iconfont 調節字體大小
iconfont的使用
平時的網頁開發該如何使用iconfont?在這邊微信小編給大家推薦一個工具:Iconfont-阿里巴巴矢量圖標庫。
WEB前端開發,圖標的快速製作
8. HTML字體要怎麼加粗
在word裡面實現文字加粗是一件輕而易舉的事。我們直接點擊加粗按鈕就可以完成。但是在css裡面沒有加粗按鈕呀,那麼如何實現字體加粗呢?下面小編向大家簡單介紹一下。
1.使用font-weight屬性
一說到在CSS里實現加粗,大家第一反應是不是使用font-weight屬性。沒錯,這是在CSS實現加粗的方法之一。
font-weight屬性的值可以是: normal 、 bold、 bolder 、 lighter 、 number。
normal: 正常的字體,相當於number為400,聲明此值將取消之前任何設置
bold: 粗體,相當於number為700,也相當於html b 加粗對象的作用
bolder: IE5+特粗體
lighter: IE5+細體
number: IE5+100|200|300|400|500|600|700|800|900
這個屬性我們最常用的值是bold,當然你也可以實際需要調整number數值達到自己所需的效果。
實例:
效果:
看到這個效果,你是否有這樣一個疑問:怎麼數值900和bold的效果差不多呀?bold不是相當於數值700嗎?這是因為加粗作用是由用戶端系統安裝的字體的特定字體變數映射決定。系統選擇最近的匹配。也就是說,用戶可能看不到不同值之間的差異。
因為web前端開發在國內的火爆,所以很多人都開始自學web前端開發。但是如果一個人自學是很有難度的,可能花費了大量的時間和精力還未必可以收到效果。給你推薦一個裙,前端開發的前面是四 四五,前端開發的中間是IO 7,前端開發的後面是四 八 六。這里每天都有免費的課程可以學習,還有很多人和你一起進步,如果你是想學習的就趕緊加入,不想學習的就不要加咯.
2.html常規加粗標簽
除了font-weight屬性之外,我們還有方法對字體實施加粗嗎?
我們先看看下面的代碼:
運行:
嘿嘿!由上圖我們可以看到運行效果跟font-weight屬性差不多喔!因此我們可以得出:使用html標簽<b></b>或<strong></strong>也能達到加粗的效果。
以上就是小編所知道的在CSS裡面實現字體加粗的兩種方法,兩種方法都非常簡單。學會以後,大家在日後的網頁設置中就不愁如何加粗字體了。當然如果你還有其他實現字體加粗的方法,記得告訴小編,大家共同學習喔!
9. html怎麼改變字體大小和顏色
可以用css改變字體的大小和顏色。
1、新建html文件,在body標簽中添加文字,這里以p標簽內容為「演示文本」為例,這時網頁將會顯示字體默認大小和顏色:
10. Web前端設計排版技巧有哪些
一、強調字體
字體的設計與強調在網頁當中相當重要,合適的排版和適當的字體強調,不僅可以讓用戶快速的抓住網站中的重點,同樣可以增強網站對用戶的吸引力
二、單頁面設計
隨著互聯網的發展,用戶的習慣更傾向於滑鼠滾輪。在用戶的體驗和習慣方面來講,與其在多個頁面中來回點擊查看,不如直接滾輪來的方便。
三、網頁色塊設計
隨著互聯網的發展和H5的出現,網站網頁的排版方式越來越傾向於簡潔大方,這最根本的原因在於:用戶的視覺和心理。不同的色塊放在一起形成強烈的對比,要麼以純文字形式,要麼以方形照片配上文字形式,這兩者在一定程度上刺激了用戶的視覺興趣,進而使用戶繼續探索。
四、背景
網頁以什麼樣的方式作為背景呢?純色?漸變?圖片?這三種都是可以的,但以商業化為目的展示,用照片作為網站網頁的背景,不僅可以達到展示的目的,而且還可以達到強烈的視覺表達效果。這種設計方式在時尚、品牌和旅遊等行業最為常見。
五、圖片
簡約、設計時尚、顏色對比突出,表達清楚、突出目的的大圖,是很多網站開發者所追捧的。同樣與枯燥的文字相比,用戶也更願意繼續觀賞這樣的網站。
六、響應式設計
隨著手機和移動端設備廣泛的被人們使用,響應式設計成為目前網站開發比不可少的內容。不僅能節省開發者的成本和時間,更能方便用戶在不同尺寸的設備上暢通無阻的瀏覽你的網站。
七、視差滾動
讓多層背景以不同的速度移動,形成運動視差的3D效果,這樣的效果以後很可能會在H5的網站中更加常見和流行。