场景

在开发Web网站时, 标准字体比较难看，这时候可以更换免费的Web字体来美化网页。Windows系统自带的字体大多数都是商业字体，只能在Windows上使用，不可以用于商业运行。目前国内有免费商用的设计字体有阿里巴巴普惠体，但不是网络字体。那么如何引入免费的网络字体?

说明

目前普遍在用免费字体Google字体服务有提供，它提供了多种语言的字体。可以下载到本地引用，也可以通过网络引用。
使用谷歌字体服务的话，因为国内访问不了它的官网^[2], 所以可以通过国内的一个代理网站获取到它的访问格式后改为Google字体服务的格式。
- 2.1 打开谷歌字体中文版^[7]. 选择一个需要的字体，比如在右上角搜索Open Sans，搜到后点击卡片的+符号会自动加入选择列表。
  图1:
- 2.2 点击浏览器底部的已选择x个字体标题栏，会弹出选择细节窗口。复制它的引用代码:
```
<link href="https://fonts.googlefonts.cn/css?family=Open+Sans" rel="stylesheet">
font-family: 'Open Sans', sans-serif;
```
图2:
- 2.3 修改fonts.googlefonts.cn为fonts.googleapis.com.
```
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
```
使用方式有三种:
- 3.1 在<head>直接<link>字体服务, 之后增加一个对body标签的字体属性修改。
```
<head><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"><style>body{font-family: 'Open Sans', sans-serif;}</style>
</head>
```
- 3.2 也可以创建一个my-site.css, 之后里面再引入谷歌字体服务, 之后在需要的页面引入这个css
```
@import url('https://fonts.googleapis.com/css?family=Open+Sans');body{font-family: 'Open Sans', sans-serif;
}
```
- 3.3 也可以把字体文件下载到本地，浏览器访问https://fonts.googleapis.com/css?family=Open+Sans,之后下载url()里的字体文件到本地。之后就是修改这个url()路径为本地相对路径。当然最后可以把这个css里的内容复制到my-site.css里，或者放入一个本地的css文件即可。

family=Open+Sans css

/* cyrillic-ext */
@font-face {font-family: 'Open Sans';font-style: normal;font-weight: 400;font-stretch: 100%;src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVIGxA.woff2) format('woff2');unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {font-family: 'Open Sans';font-style: normal;font-weight: 400;font-stretch: 100%;src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2) format('woff2');unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {font-family: 'Open Sans';font-style: normal;font-weight: 400;font-stretch: 100%;src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVIGxA.woff2) format('woff2');unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {font-family: 'Open Sans';font-style: normal;font-weight: 400;font-stretch: 100%;src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVIGxA.woff2) format('woff2');unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {font-family: 'Open Sans';font-style: normal;font-weight: 400;font-stretch: 100%;src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVIGxA.woff2) format('woff2');unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {font-family: 'Open Sans';font-style: normal;font-weight: 400;font-stretch: 100%;src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVIGxA.woff2) format('woff2');unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {font-family: 'Open Sans';font-style: normal;font-weight: 400;font-stretch: 100%;src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {font-family: 'Open Sans';font-style: normal;font-weight: 400;font-stretch: 100%;src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

参考

阿里巴巴普惠体正式发布
Browse Fonts - Google Fonts
Get Started with the Google Fonts API Google Developers
google fonts 国内使用方案
How to Use Google Fonts in Website design with Bootstrap | GyanBlog
How To Add Google Fonts Using CSS – Fonts Plugin
Google Fonts | 谷歌字体中文版 | GoogleFonts

[JavaWeb]_[初级]_[如何更换免费网站字体]相关推荐

[JavaWeb]_[初级]_[对Html特殊符号进行转义防止XSS攻击和反转义]
场景在开发Java Web程序时,为了防止XSS的JavaScript攻击, 需要对用户输入转义,使JavaScript脚本不能执行. 在前端可以通过获取<div>的innerHTML属 ...
[Java]_[初级]_[使用正则高效替换字符串的多个占位符为多个值]
场景在开发基于模板内容的Java程序时, 比如一个邮件内容模板,在内容里放置一些占位符$email,$name等来作为替换实际内容的符号.那么这时候如何做才可以少生成不必要的String字符串,从而 ...
[Python]_[初级]_[多线程下载单个文件]
场景使用Python做自动化测试时,有时候需要从网络下载软件安装包并安装.但是使用urllib库时,默认都是单线程下载文件,如果文件比较小还好说,如果文件有20M时,普通的网速就要等待很长的时间.有 ...
[Windows]_[初级]_[使用7z命令行工具进行打包备份]
场景在开发程序或做一些自动化脚本时, 经常用压缩格式来进行打包文件夹为zip,或解压zip,rar,tar文件.如果压缩的是exe二进制文件,是不需要再进行压缩的,只需要存储即可,这样可以增加打包的 ...
[Android]_[初级]_[sdk docs reference api 文档打开慢的解决办法]
此题正解:打开firefox, 选中菜单 File->Work Offline,之后打开api文档都是秒开了,缺点就是不能访问在线的网址. 默认菜单是隐藏的,可以移动到Tab页空白处右键Menu ...
[C/C++标准库]_[初级]_[优先队列priority_queue的使用]
2019独角兽企业重金招聘Python工程师标准>>> std::priority_queue 场景: 1. 对于一个任务队列,任务的优先级由任务的priority属性指明,这时候就 ...
webstorm2020背景和字体_怎么为WebStorm更换主题修改字体样式
开发Node.js程序,当选首选的是webstorm IDE工具,这个不用解释.但是可能很多习惯其它IDE的同学在使用Webstorm的时候,后感觉webstorm的主题,并不怎么适合自己的审美.就像 ...
[C/C++11]_[初级]_[如何转换带井号的#十六进制颜色字符串到数值]
场景表示颜色的RGB值,一般有两种方法,一种是使用使用数值表示RGB(255,255,255),一种是使用字符串#FE07AB.那么字符串形式的表示如何得到r,g,b各值的数值大小呢? 说明在&l ...
[Python]_[初级]_[使用PyCharm时不识别根包位置和Debug时报ModuleNotFoundError错误]
场景在使用PyCharm开发程序时,当我们Debug某个文件时,会报以下错误,什么原因? Traceback (most recent call last):File "C:\Progra ...

[JavaWeb]_[初级]_[如何更换免费网站字体]

场景

说明

family=Open+Sans css

参考

[JavaWeb]_[初级]_[如何更换免费网站字体]相关推荐

最新文章

热门文章