68 lines
2.2 KiB
Markdown
68 lines
2.2 KiB
Markdown
---
|
||
title: Where to Get Fonts
|
||
localeTitle: 在哪里获取字体
|
||
---
|
||
## 在哪里获取字体
|
||
|
||
Google字体或Font Squirrel等在线字体服务提供了一种在您的网站上使用不同字体的简便方法，而无需担心查看您网站的人是否会在其系统上使用该字体。
|
||
|
||
### 下载字体
|
||
|
||
Font Squirrel等网站允许您下载您选择的字体文件。完成后，您必须在托管您网站的服务器上上传它们。要使用它们，您需要在CSS样式表中声明它们，这意味着告诉您的CSS要求用户的浏览器显示它。声明字体通常使用CSS样式表上的`@font-face` 。
|
||
|
||
```css
|
||
@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";
|
||
}
|
||
```
|
||
|
||
请注意，您还可以根据浏览器兼容性指定字体的格式，如下所示。
|
||
|
||
```css
|
||
@font-face {
|
||
font-family: "My Super Awesome Open Sans Font";
|
||
src: url("/fontfolder/open-sans.woff"); format("woff"),
|
||
}
|
||
```
|
||
|
||
### 谷歌字体
|
||
|
||
使用Google字体，您无需在网站上传字体文件，只需在网站的`head`某个链接即可。
|
||
|
||
要使用Google字体，请浏览[网站](https://fonts.google.com/)以查找最适合您项目的字体。选择后，单击字体旁边的加号（+）。屏幕底部会出现一个条形图。点击它。然后，您将获得几行代码。将HTML行复制并粘贴到现有HTML文件的头部元件。然后使用CSS并在样式表中的必要时使用它。
|
||
|
||
```html
|
||
|
||
<html>
|
||
<head>
|
||
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
Some text.
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
```css
|
||
body{
|
||
font-family: "Inconsolata", monospace;
|
||
}
|
||
```
|
||
|
||
你完成了！您已成功为您的网站添加新字体。
|
||
|
||
##### 其他资源：
|
||
|
||
* [谷歌字体](http://fonts.google.com)
|
||
* [FontSpace](http://www.fontspace.com)
|
||
* [字体松鼠](http://fontsquirrel.com)
|
||
* [DaFont](http://www.dafont.com)
|
||
* [1001个免费字体](http://www.1001freefonts.com)
|
||
|
||
#### 更多信息：
|
||
|
||
* [Mozilla Developer Network的Web字体概述](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts) |