freeCodeCamp/guide/chinese/typography/where-to-get-fonts/index.md

2.2 KiB
Raw Blame History

title localeTitle
Where to Get Fonts 在哪里获取字体

在哪里获取字体

Google字体或Font Squirrel等在线字体服务提供了一种在您的网站上使用不同字体的简便方法而无需担心查看您网站的人是否会在其系统上使用该字体。

下载字体

Font Squirrel等网站允许您下载您选择的字体文件。完成后您必须在托管您网站的服务器上上传它们。要使用它们您需要在CSS样式表中声明它们这意味着告诉您的CSS要求用户的浏览器显示它。声明字体通常使用CSS样式表上的@font-face

@font-face { 
  font-family: "My Super Awesome Open Sans Font"; /* name that you will use later to apply the font */ 
  src: url("/fontfolder/open-sans.woff"); /* path to the file */ 
 } 
 body { 
  font-family: "My Super Awesome Open Sans Font"; 
 } 

请注意,您还可以根据浏览器兼容性指定字体的格式,如下所示。

@font-face { 
 font-family: "My Super Awesome Open Sans Font"; 
 src: url("/fontfolder/open-sans.woff"); format("woff"), 
 } 

谷歌字体

使用Google字体您无需在网站上传字体文件只需在网站的head某个链接即可。

要使用Google字体请浏览网站以查找最适合您项目的字体。选择后,单击字体旁边的加号(+。屏幕底部会出现一个条形图。点击它。然后您将获得几行代码。将HTML行复制并粘贴到现有HTML文件的头部元件。然后使用CSS并在样式表中的必要时使用它。


<html> 
  <head> 
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> 
  </head> 
  <body> 
  Some text. 
  </body> 
 </html> 
body{ 
  font-family: "Inconsolata", monospace; 
 } 

你完成了!您已成功为您的网站添加新字体。

其他资源:

更多信息: