[CSS]正确指定和命名字体家族(因为它不起作用以及如何使用Google字体)

字体系列

“字体的外观因所使用的设备而异,但是我该怎么办?”
“我不知道如何指定它,所以我总是复制和粘贴样本。”

您曾经有过这样的经历吗?
当我开始学习网页设计时,尤其是日语字体时,我很难过。
根据页面的概念,日语字体的类型很少,并且大多数所需的字体都是付费的。现在有更多类型的日语。
特别是,日语现在可以在google-font上使用了,这对网站创建者来说是个好消息。

这次,让我们学习如何使用字体家族及其注意事项。我特别希望掌握如何使用google提供的Google字体。这不是很难记住的知识,所以请掌握它。
本文是为初学者编写的,因此,如果您是经验丰富的人,请在需要时跳过它。

[这也是经常阅读]
[对于初学者]仔细解释如何编写CSS(样式表)

什么是字体家族

物业描述

名为font-family的属性用于指定字符的字体。用文字编写文档时,您还将指定诸如“ Gothic”和“ Hiragino”之类的字体。对于官方文件,我们使用“ Mincho样式”,对于小册子,我们使用简化的特殊字体,例如“ Utsukushi样式”。同样,网站应提供适合浏览用户的字体。因此,提供了一个称为“ font-family”的CSS属性。

怎么写(指定方法)

以下是写作的基础。在“字体类型”部分中,通常编写多种字体类型。主要原因是它的外观因操作系统而异。实际上,在Windows屏幕上查看时,在Mac上指定时满意的字体会以完全不同的图像传输。为避免这种情况,请记住,字体类型通常不会被列为一种。

 font-family: 字体类型;

如何使用字体家族

多重指定

现在,让我们详细了解如何使用它。尽管它是前面提到的多重规格,但是图像如下。

 font-family: 'YuGothic','Yu Gothic','平野角哥特式ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;

许多人会觉得他们已经设置了很多字体。首先,作为一种书写方式,如果您想指定多种字体,’font-type’用单引号引起来。用“,”分隔每个。

如前所述,编写多个脚本的原因是它可以处理不同的操作系统。如果创建者设置的字体安装在用户的PC上会很好,但是如果没有,则它将不可见。换句话说,为了假设另一方的环境和生产方的环境之间的差异进行书写,除了具有多个之外,别无选择。特别是,在“ Gothic”中,Mac和Windows之间没有区别,但是在“ Mincho”中,存在区别。

然后,从第一个字体中读取它,如果不存在,则移至下一个字体。使用这种机制,您会发现只编写一种字体类型是很烦人的。

首先是英语,之后是日语

仅以日语创建站点的情况很少。大多数站点都是英语和日语的混合体。因此,需要指定一种可以同时处理英语和日语的字体。当同时指定英语和日语字体时,习惯上要先指定英语字体,然后再指定日语,如上例所示。

例如,如下所示,在“字体”部分中指定了YuGothic,在日语部分中指定了“ Hiragino Kaku Gothic Pro N”。

通用字体家族

在这里,让我们了解所谓的“通用字体系列”。可以将其视为在其他设备上未显示指定字体时显示的字体。通常有五种类型。

  • 无衬线(哥特式)
  • 衬线(Mincho身体)
  • 等宽字体(等宽字体)
  • 幻想(装饰字体)
  • 草书(写字体)

但是,最好指定前两个(哥特式或Mincho)。

 font-family: '@@@', '@@@', '@@@', '@@@',sans-serif;
 font-family: '@@@', '@@@', '@@@', '@@@',serif;

放置

在某些情况下,仅更改标题字体,但很少有人费心更改页面各部分的字体类型。因此,一次全部指定它们如下更有效。

 body{
 font-family: 'YuGothic','Yu Gothic','平野角哥特式ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;
 }
  *{
 font-family: 'YuGothic','Yu Gothic','平野角哥特式ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;
 }

字体类型

主要类型

接下来,让我们看看可用的字体。这些类型很多,您确实需要找到适合您站点目的的字体,但是这里有一些常见的字体。 font-family属性提供以下标准字体。但是,实际上,除了以下字体以外,还有多种类型。

语言类型 字体(大) 字体(小)
英语 哥特 阿里亚尔
阿里亚尔·布莱克
影响力
MS 无衬线字体
无衬线字体
Mincho系统 英语字体格式一种
世纪
MS衬线
衬线
装饰系统 幻想
单型科西嘉岛
等宽 等宽
信使
写作风格 草书
Comic Sans MS
日本 哥特 MS P哥特式/ MS P哥特式
于哥特
明良
平野角歌德
平野角哥特式ProN W3 /平野角哥特式ProN
平野丸吾ProN
Mincho系统 MS P Mincho
明天早上MS
于敏cho
平野Mincho ProN W3 /平野Mincho ProN

特别是,日语字体根据操作系统而有所不同。每个人使用的操作系统(例如Windows和Mac)都不相同,因此我想为每个人提供支持。

字体类型 日语字体类型 支持的操作系统
哥特 MS哥特式 旧版Windows日语字体
Meilio 当前Windows日语字体
平野 Mac日语字体
Mincho系统 于敏cho Windows 8或更高版本的Mincho字体
MS P Mincho,MS Mincho 早期的Windows Mincho字体
平野民町 Mac的Mincho字体

外观差异(英语)

外观差异(哥特式)

阿里亚尔


苹果浏览器

阿里亚尔·布莱克


苹果浏览器

影响力


苹果浏览器

MS 无衬线字体


苹果浏览器

无衬线字体


苹果浏览器

外观差异(Mincho系统)

英语字体格式一种


苹果浏览器

世纪


苹果浏览器

MS衬线


苹果浏览器

衬线


苹果浏览器

外观差异(装饰)

幻想


苹果浏览器

单型科西嘉岛


苹果浏览器

外观差异(等宽系统)

等宽


苹果浏览器

信使


苹果浏览器

外观差异(书写风格)

草书


苹果浏览器

Comic Sans MS


苹果浏览器

外观差异(英语)

外观差异(哥特式)

MS哥特式


苹果浏览器

于哥特


苹果浏览器

明良


苹果浏览器

平野角歌德


苹果浏览器

平野角哥特式ProN


苹果浏览器

平野丸吾ProN


苹果浏览器

外观差异(Mincho系统)

MS P Mincho


苹果浏览器

MS P Mincho


苹果浏览器

MS P Mincho


苹果浏览器

MS P Mincho


苹果浏览器

如何使用谷歌字体

谷歌字体的功能

最后,让我们谈谈“ google字体”,它经常在Web生产中使用,并且是免费提供的。如今,这个数字很小,但它也支持日语,您应该有机会使用它。

首先,请点击下面的链接。

谷歌字体

您可以在页面右侧看到以下显示。

首先,按类型缩小范围。

衬线 Mincho身体
无衬线字体 哥特
显示 装饰字体
手写 手写字体
等宽 等宽字体

或者,按趋势显示,将出现以下显示。

趋向 趋势顺序
流行 为了受欢迎
添加日期 新到货单
按字母顺序 按字母顺序

通过语言选择时,可以选择“日语”。

您也可以选择字体样式。

样式数 指显示的样式数。如果将其向右移动,则显示的数字将受到限制;如果将其向左移动,则将显示所有数字。
厚度 向左移动可减小字符大小,向右移动可增大字符大小。
倾斜 这使您可以选择字符的倾斜度。向左移动可减小字符的倾斜度,向右移动可增加字符的倾斜度。
宽度 这使您可以选择字符之间的宽度大小。向左移动以减小字母之间的宽度,向右移动以增大宽度。

您还可以查看各种模式的样本。请尝试放信件。然后,将出现以下显示。

句子 单句显示作为示例显示。
显示一个长句子。
字母 显示每个单词。
数词 显示数字。
自订 在这里您可以尝试字体样式。

在“自定义”部分,您也可以尝试使用字体。

您也可以尝试字母的粗细。

您也可以尝试使用字体大小。

如何使用谷歌字体

确定要与Google字体一起使用的字体后,单击右上角的加号。

然后,所选字体将显示在底部。点击它。

出现以下显示。

然后将代码放入HTML和CSS中。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Font Family</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="//fonts.googleapis.com/css?family=Noto+Serif+SC" rel="stylesheet">
</head>
@@@{
  font-family: 'Noto 衬线 SC', 衬线;
}

而已。

字体系列无法正常工作/外观不同的原因

即使指定了字体系列,由于某些原因它也可能无法正常工作。
如上所述,首先请确保已正确指定。如果您列出多个,则很容易忘记逗号。

但是,即使正确指定,它也可能无法工作。
关于如何使用字体家族,需要注意的一件事是,它的外观取决于操作系统和浏览器。例如,在PC chrome中指定的字体在iOS 苹果浏览器中可能会有所不同。这也是一个规范问题,因此您需要确保它处于可接受的水平。

因此,请确保检查操作系统和浏览器,以查看是否可以在另一方的浏览器上看到指定的字体。
这取决于用户的环境,因此您只能做什么。但是,有必要设计诸如使用多种规格以及使用字体随浏览器而不同的字体。

顺便说一句,如果您想学习编程,包括网页设计技术推动被推荐。该课程将根据学习目的量身定制。

我们提供免费咨询,因此请查看。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。