[CSS]字体家族的正确规范方法和写作方法和写入方法

字体系列

“如何看到字体取决于您使用的设备,但它如何?”
“我不知道如何找到良好并始终复制样本”

你有过这样的经历吗?
当我开始学习网络设计时,我特别挣扎着日本的字体。
根据页面概念,日语字体中几种类型的字体,以及您想要的字体主要是支付。现在日本类型也增加了。
特别是,日语处理开始使用Google-Font将是Web生产者的好消息。

这一次,让我们了解如何使用字体家庭及其笔记。特别是,我希望掌握如何使用Google提供的Google字体。如果你记得,这不是一个困难的知识,所以请掌握。
由于这篇文章是为初学者编写的而言,经验丰富的人应根据需要跳过它们。

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

与字体家庭

财产描述

在指定字符字体时使用字体家族的属性。如果您还在Word中编写文档,您将指定“哥特式”和“希拉格诺”等字体。如果您是正式文件,则使用“星期一”,您将使用简化的特殊字体,例如“抑郁体”,以宣传册以产生敏感。同样,该网站还应查看具有想要查看它们的用户的字体。因此,它是名为“Font-Family”的CSS属性,这些属性是准备的。

如何编写(指定方法)

以下是写作的基础。在字体类型中,通常写入多个字体类型。这就是为什么它与OS不同的是外观不同的。在Mac上指定,它实际上恰好在Windows屏幕上查看时在完全不同的图像中传输满意的字体。为了防止它,请记住字体类型不提供一个描述。

 font-family: フォントの種類;

如何使用字体家庭

多种规格

好吧,让我们来看看如何使用更多细节。虽然前面提到的多个触摸,但图像如下。

 font-family: 'YuGothic','Yu Gothic','希拉格诺·卡库哥特语','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;

有许多人有一种建立很多字体的感觉。首先,如果要指定多个字体,’font-type’用单引号包装。按“,”每个人分开。

如前所述,编写多个的原因是因为它可以响应OS之间的差异。您应该在用户PC上的生产方面上设置字体,但您无法看到它。换句话说,您不禁在生产方面的环境和环境之间写出差异。特别是,没有Mac和Windows之间的区别显示出“哥特式身体”,但“MINCHISO”出现有所不同。

然后,如果从第一个字体读取并且没有,它会移动到下一个字体。思考这种机制我认为可以理解,只写一个字体类型。

英语第一和日本

有很少的案例生产日本网站。大多数是英语和日本混合的网站。因此,需要可以支持英语和日语的字体规格。如果要指定英文字体和日本字体,请按照上述指定前方的英语字体,然后放置日语。

例如,如下所述,yugothic指定“字体”部分的“Hiragino Kaku GoThic Prothic Prothic Prothic”。

通用字体家庭

在这里,让我们了解“通用字体系列”。这应该被视为当指定的字体未显示在另一个设备上时出现的字体。这通常是五种类型。

  • Sans-Serif(哥特式身体)
  • 系列(Mincho)
  • 单座(等同字体)
  • 幻想(装饰字体)
  • 草书(写字字体)

但是,指定前两个,哥特式和Akira线是很好的。

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

安排

有一种情况,只会改变标题的字体,但很少有人改变每个页面部分的字体类型。因此,如下规模指定更有效。

 body{
 font-family: 'YuGothic','Yu Gothic','希拉格诺·卡库哥特语','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;
 }
  *{
 font-family: 'YuGothic','Yu Gothic','希拉格诺·卡库哥特语','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;
 }

字体类型

主要类型

接下来,让我们看看字体有什么。因为这种类型非常大,所以有必要寻找出于该网站目的的字体,但我们将在此引入一般字体。 Font-Family属性具有以下字体作为标准。但是,除了以下字体之外,还有几种类型的字体。

语言类型 字体类型(大) 字体类型(小)
英语 哥特式系统 arial.
arial. black
影响
无衬线字体女士
无衬线字体
周一 英语字体格式一种
世纪
衬里女士
衬里
装饰系统 幻想
monotype corsiva.
相等的 单座
信使
写作 草书
漫画SANS女士
日本人 哥特式系统 MS P Gothic / MS PGOTHIC
俞哥特
Meirio / Meiryo.
希拉格诺角哥特式
hiragino corp. pron w3 / hiragino kaku gothic prothic prothic prothic prothic prothic prothic prothic proth
希拉克诺玛发的贺日
周一 P akira女士
MS Mint.
游/ yumincho.
希拉里诺·薄荷的Pron w3 / hiragino mincho

特别是,日本字体因如何出现操作系统而异。人员使用的操作系统,如Windows,Mac,所以您想响应每个。

字体类型 日本字体类型 兼容的操作系统
哥特式系统 女士P哥特式 以前的Windows日语字体
Meirio. 当前的Windows日语字体
希拉克诺 MAC日本字体
周一 朝(yumincho) Mincho Windows 8及以后的字体
MS M MS MISCONO MS 以前的Windows Mincho字体
Hiragino Akira Mac的Mincho字体

如何看待(英语)

如何看待(哥特式)

arial.

铬合金

苹果浏览器

arial. black

铬合金

苹果浏览器

影响

铬合金

苹果浏览器

无衬线字体女士

铬合金

苹果浏览器

无衬线字体

铬合金

苹果浏览器

如何看待外观的差异

英语字体格式一种

铬合金

苹果浏览器

世纪

铬合金

苹果浏览器

衬里女士

铬合金

苹果浏览器

衬里

铬合金

苹果浏览器

如何看待(装饰系统)的差异

幻想

铬合金

苹果浏览器

monotype corsiva.

铬合金

苹果浏览器

如何看待(等同系统)的差异

单座

铬合金

苹果浏览器

信使

铬合金

苹果浏览器

如何看待(写作)

草书

铬合金

苹果浏览器

漫画SANS女士

铬合金

苹果浏览器

如何看待(英语)

如何看待(哥特式)

女士P哥特式

铬合金

苹果浏览器

俞哥特

铬合金

苹果浏览器

Meiryo.

铬合金

苹果浏览器

希拉格诺角哥特式

铬合金

苹果浏览器

希拉格诺·卡库哥特语

铬合金

苹果浏览器

希拉克诺玛发的贺日

铬合金

苹果浏览器

如何看待外观的差异

P akira女士

铬合金

苹果浏览器

P akira女士

铬合金

苹果浏览器

P akira女士

铬合金

苹果浏览器

P akira女士

铬合金

苹果浏览器

如何使用谷歌字体

谷歌字体功能

最后,让我们解释通常用于Web生产并自由提供的“Google字体”。目前,这个数字很小,但应该有人在日语中使用的机会。

首先,单击下面的链接。

谷歌字体

我认为您可以在页面右侧找到以下显示。

首先,我们将缩小类型。

衬里 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 Serif SC', serif;
}

这是完整的。

字体 - 家庭不起作用·导致不同的视图

即使指定了字体家庭,它也可能无法为什么工作。
如上所述,请确保您可以正确指定。如果列出了多个件,则往往被遗忘。

但是,您可能无法正常工作。
它是您想要小心作为使用字体家庭,操作系统和浏览器的指出。例如,PC Chrome指定的字体是IOS Safari中的不同字体。这也是一个规范问题,所以你需要在检查它是否是可接受的级别时工作。

因此,如果指定的字体看起来甚至与另一个浏览器看起来似乎看起来,请务必检查浏览器。
这在一定程度上限于某种程度,因为它取决于用户的环境。但是,诸如使用多种规格和浏览器的设备,例如使用在差异中没有不同的字体。

顺便说一下,如果您学习编程,包括网页设计技术提升(技术提升)被推荐。它是通过命令达到学习目的的定制。

我是免费的咨询,所以请检查一下。

给这篇文章的人

田中 陽介

越南的企业家和人力资源相关咨询。七年已经过去了日本,但我享受了一个不能在日本完成的驼峰。最近我在铁路上用Ruby制作网络服务。