前端如何導入谷歌字體庫

#谷歌字體庫內容豐富,涵蓋上千種多語言支持的字體,學習導入谷歌字體庫來增加網站的閱讀性,是必不可少的一項技能#

1,前往谷歌字體網站

要會魔法,裸連很卡

2, 尋找心儀字體

Googles Fonts下面的filters可以篩選文字,字體庫同族字體會支持不同的語言,如果不確定是否支持自己想要的多語言,可以在篩選欄中打入多國語言,對照右側字體是否正常顯示即可。無法顯示的字體會呈現問號。這里拿Noto Sans教學

3,進去后 點擊右上角的Get font按鈕

4,點擊會進入自己的字體庫

這里會存在所有你點擊來過的字體,后續的引用也會全部引入,如果不想引入,需在此刪除。點擊右側的使用方法 Get embed code獲取代碼

5, 選擇<link>引入

  • 復制’Embed code in the <head> of your html‘的代碼 直接塞到index.html中就行了
  • 第二個’Noto Sans SC: CSS class for a variable style‘是自定義字體的相關css案例,基本用不到
  • 如果想方便可以在左側選擇One Value,只會導入一種粗細的字體

6,然后在你的主css中定義全局字體族即可

 // main.css
*{font-family: "Noto Sans SC", sans-serif;
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/76336.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/76336.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/76336.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

SnapdragonCamera驍龍相機源碼解析

驍龍相機是高通開發的一個測試系統攝像頭的demo&#xff0c;代碼完善&#xff0c;功能強大。可以配合Camera驅動進行功能聯調。 很多邏輯代碼在CaptureModule.java里。 CaptureModule有8000多行&#xff0c;包羅萬象。 涉及到界面顯示要結合CaptureUI.java 一起來實現。 Ca…

多線程猜數問題

題目&#xff1a;線程 A 生成隨機數&#xff0c;另外兩個線程來猜數&#xff0c;線程 A 可以告訴猜的結果是大還是小&#xff0c;兩個線程都猜對后&#xff0c;游戲結束&#xff0c;編寫代碼完成。 一、Semaphore 多個線程可以同時操作同一信號量&#xff0c;由此實現線程同步…

seq2seq

理解 transformer 中的 encoder decoder 詳細的 transformer 教程見&#xff1a;【極速版 – 大模型入門到進階】Transformer 文章目錄 &#x1f30a; Encoder: 給一排向量輸出另外一排向量&#x1f30a; Encoder vs. Decoder: multi-head attention vs. masked multi-head at…

Proxmox pct 部署ubuntu

pct 前言 PCT(Proxmox Container Tool)是 PVE 中用于管理 Linux 容器(LXC)的命令行工具。通過 PCT,用戶可以執行各種容器管理任務,例如創建新的容器、啟動和停止容器、更新容器、安裝軟件包、導出和導入容器等。PCT 提供了與 Web 界面相同的功能,但通過命令行進行操作,…

Google Play關鍵字優化:關鍵排名因素與實戰策略

如果您準備發布應用程序或開始專注于關鍵字優化&#xff0c;您可能想知道如何向Google Play上的應用程序添加關鍵字。Google Play上的搜索量和排名與App Store不同&#xff0c;而且被索引排名的關鍵字也不同。在此文中&#xff0c;我們將確定Google Play上的關鍵排名因素&#…

Kafka延遲隊列實現分級重試

技術方案 方案背景 Kafka隊列消息消費處理過程中&#xff0c;發生處理異常&#xff0c;需要實現重試機制&#xff0c;并基于重試次數實現不同延遲時間重試方案。 方案介紹 通過實現Kafka延遲隊列來實現消息重試機制。 目標&#xff1a; 支持所有業務場景的延遲重試支持多…

Maven核心配置文件深度解析:pom.xml完全指南

&#x1f9d1; 博主簡介&#xff1a;CSDN博客專家、全棧領域優質創作者、高級開發工程師、高級信息系統項目管理師、系統架構師&#xff0c;數學與應用數學專業&#xff0c;10年以上多種混合語言開發經驗&#xff0c;從事DICOM醫學影像開發領域多年&#xff0c;熟悉DICOM協議及…

MSTP多域生成樹

協議信息 MSTP 兼容 STP 和 RSTP&#xff0c;既可以快速收斂&#xff0c;又提供了數據轉發的多個冗余路徑&#xff0c;在數據轉發過程中實現 VLAN 數據的負載均衡。 MSTP 可以將一個或多個 VLAN 映射到一個 Instance&#xff08;實例&#xff09;&#xff08;一個或多個 VLAN…

MQTT 服務器(emqx)搭建及使用(一)

一. EMQX 服務器搭建 1.下載EMQX 下載鏈接&#xff1a;Windows | EMQX 文檔 官方手冊 2.下載內容解壓至盤符根目錄 3.進入bin文件夾&#xff0c;在地址欄輸入cmd 4.依次輸入下面命令安裝服務 .\emqx.cmd install .\emqx.cmd console 5.設置自啟動 創建批處理文件&#x…

在Thinkphp中使用JWT 包括JWT是什么,JWT的優勢

首先了解一下什么是JWT JWT 是一種開放標準&#xff08;RFC 7519&#xff09;&#xff0c;用于在各方之間以 JSON 對象形式安全傳輸信息4。其核心特點包括&#xff1a; 結構&#xff1a;由三部分組成&#xff08;Header、Payload、Signature&#xff09;&#xff0c;通過點號…

hackmyvn-casino

arp-scan -l nmap -sS -v 192.168.255.205 目錄掃描 dirsearch -u http://192.168.255.205/ -e * gobuster dir -u http://192.168.255.205 -w /usr/share/wordlists/dirbuster/directory-list-2.3-medium.txt -x php -b 301,401,403,404 80端口 隨便注冊一個賬號 玩游戲時的…

圖表配置表增加分析指標字段

在設計報表圖表配置表時&#xff0c;為存儲 同比、環比 這類分析指標&#xff0c;建議通過以下方式定義字段結構和命名&#xff1a; 一、字段設計方案 // 配置表示例結構 interface ChartConfig {id: string; // 唯一標識name: string; // 圖表…

廣州SMT貼片加工廠精密制造工藝解析

內容概要 在電子制造領域&#xff0c;SMT貼片加工技術已成為現代電子產品精密組裝的核心環節。廣州作為華南地區電子產業的重要樞紐&#xff0c;其SMT貼片加工廠通過融合自動化設備與嚴格工藝標準&#xff0c;構建起高效可靠的制造體系。 對于電子產品制造商而言&#xff0c;…

RK3568-適配ov5647攝像頭

硬件原理圖 CAM_GPIO是攝像頭電源控制引腳,連接芯片GPIO4_C2 CAM_LEDON是攝像頭led燈控制引腳,連接芯片GPIO4_C3編寫設備樹 / {ext_cam_clk: external-camera-clock {compatible = "fixed-clock";clock-frequency = <25000000>;clock-output-names = "…

關于 @Autowired 和 @Value 使用 private 字段的警告問題分析與解決方案

問題背景 在使用 Spring 框架進行開發時&#xff0c;我們經常會使用 Autowired 和 Value 注解來進行依賴注入和屬性值注入。然而&#xff0c;當我們將這些注解應用于 private 字段時&#xff0c;IDE&#xff08;如 IntelliJ IDEA&#xff09;可能會顯示警告信息&#xff0c;提…

Flutter 開發環境配置--宇宙級教學!

目錄 一、安裝環境&#xff08;Windows&#xff09;二、Android 創建Flutter項目三、VSCode 搭建環境四、補充 一、安裝環境&#xff08;Windows&#xff09; Flutter SDK 下載 推薦使用中國鏡像站點下載 Flutter SDK&#xff0c;速度更快&#xff1a;中國環境 或者從官網下載…

碰一碰發視頻網頁版本開發的源碼搭建指南

引言 在數字化信息快速傳播的時代&#xff0c;近場通信&#xff08;NFC&#xff09;技術為信息交互帶來了新的便捷方式。通過網頁版本實現碰一碰發視頻功能&#xff0c;能夠讓用戶在瀏覽器環境中輕松實現視頻分享&#xff0c;拓展了視頻傳播的途徑。本文將詳細介紹碰一碰發視頻…

OMNIWeb 數據介紹

網址&#xff1a;SPDF - OMNIWeb Service 注&#xff1a;OMNI并非特定縮寫&#xff0c;僅表示"多樣化"含義。 About the Data All the data to which this interface and its multiple underlying interfaces provide access have in common that they are relevan…

Python學習(二)操作列表

一、列表的遍歷 每個縮進的代碼行都是循環的一部分&#xff0c;且將針對列表中的每個值都執行一次。因此&#xff0c;可對列表中的每個值執行任意次數的操作。 magicians [alice, david, carolina] for magician in magicians:print(magician)注意&#xff1a; 1、遍歷的時…

淺析RAG技術:大語言模型的知識增強之道

淺析RAG技術&#xff1a;大語言模型的知識增強之道 &#x1f3e0; 引言&#xff1a;當生成遇到檢索 在人工智能領域&#xff0c;大型語言模型(LLMs)如GPT-4、Llama3等展現出了驚人的文本生成能力&#xff0c;但它們也面臨著知識滯后、事實性錯誤等挑戰。Retrieval-Augmented …