如何使用CSS Web字体:Google字体和日语字体

[业界动态] 作者:你换个环境 浏览次数: 18/12/10 11:14

什么是Web字体?

1.jpg


除非安装了指定的字体,否则它不会以字体显示。

使用CSS,您可以指定要用于显示字符的字体名称。但是,无论您指定了多少个字体名称,除非在查看器环境中安装了字体,否则它是没有意义的。在没有指定字体的环境中,它将以标准字体显示,如图的右下角所示。如果你绝对想用你想要的字体显示它,那么只有一种方法可以像往常一样对它进行成像。然而,成像具有各种缺点,这是不希望的。方便的是CSS3的Web字体功能。

■ CSS如何用于下载和显示每个浏览器的字体文件

2.jpg

除非安装了指定的字体,否则它不会以字体显示。

使用CSS,您可以指定要用于显示字符的字体名称。但是,无论您指定了多少个字体名称,除非在查看器环境中安装了字体,否则它是没有意义的。在没有指定字体的环境中,它将以标准字体显示,如图的右下角所示。如果你绝对想用你想要的字体显示它,那么只有一种方法可以像往常一样对它进行成像。然而,成像具有各种缺点,这是不希望的。方便的是CSS3的Web字体功能。

■ CSS如何用于下载和显示每个浏览器的字体文件

3.jpg

“谷歌字体”提供超过840的欧洲字体作为网络字体

谷歌运营一项名为“谷歌字体”的服务,提供超过840种欧洲字体作为网络字体。您可以从丰富的字体集中选择所需的字体,并以非常简单的方式显示它,您只需在HTML或CSS源中添加指定的行。

2. 直接上传字体文件并编写CSS以使用网络字体

4.jpg

CSS源使用Web字体

您还可以在您的站点上传字体文件并编写CSS以使用它。如果要使用自己的字体,免许可证字体等,可以使用此方法轻松显示所需字体的字符。

3. 日语Web字体服务:使用Morisawa“TypeSquare”

5.jpg

Web字体服务“TypeSquare”,可以使用许多漂亮的日文字体

还提供日语字体服务。例如,Morisawa是一家主要的字体销售公司,提供大量日语字体和Web字体服务“TypeSquare”。由于日语有很多字符,因此下载字体文件需要时间。在TypeSquare中,传递限于网页中存在的字符的字体子集以最小化下载时间。这是一种方便的服务,您可以轻松使用日语字体。

6.jpg

1.如何使用Google字体:如何指定所需的字体

Google的“ Google字体 ”服务提供了许多可用作网络字体的字体。在撰写本文时,有848种字体可供使用。会员注册是不必要的,可以以非常简单的方式使用。目前,仅提供包含字母,数字和符号的欧洲字体。但是,日语网站中有一些场景需要使用西方字体,例如菜单项和标题重音。在这样的地方,请利用它。

7.jpg

“Google Fonts”服务提供超过840种巨大的欧洲字体作为Web字体

【如何使用谷歌字体】

(A)谷歌字体如何寻找所需的字体1. 细化字体2. 尝试自由指定预览字符串(B)选择在谷歌字体所需的字体,作为方法来制备1. 为选择状态字体2. 问题的画面用于使用所选择的字体3. 选择,如所需要的字体(※可选)4。复制源以读取要使用的字体和源

(A)如何使用Google字体查找所需的字体

首先,我使用浏览器访问“ Google字体 ”网站。由于显示了许多字体,请查找所需的字体。1.减少字体按顺序浏览所有840种字体是不切实际的,所以让我们首先指定条件来缩小字体。在Google字体的屏幕上,右侧显示了用于缩小字体的各种界面。每个角色将在下面介绍,因此请参考它作为指南。

8.jpg

您可以通过指定各种条件(如字体)来缩小字体范围

类别项目(上图中的蓝色圆圈)您可以指定5种不同的字体类别。衬线Wahige装饰用字体(明朝体日语),无衬线Wahige自由装饰-字体(哥特日语),显示被装饰字体,手写是字体,如笔迹,等宽的它是一种等宽字体。您可以指定排序项目的顺序(上图中的绿色圆圈)顺序。趋势是流行的顺序,受欢迎的顺序,新到货顺序的日期,按名称顺序的字母顺序。您可以指定语言项目字体中包含的语言,但没有日语。特别是如果您没有目标语言,您可以选择默认的“所有语言”。底部的滑块项目(上图中的黄色圆圈)您可以指定每个项目的级别。例如,“厚度”允许您指定字符的粗细。只有瘦字体可以显示在左端,只有粗字体可以显示在右端。您可以选择Slant for italic level,Width for horizontal width,style of styles of the type。2.尝试自由指定预览字符串在字体的预览字符串中,在开头显示适当的短句。这些不仅是固定的字符串,还有输入字段。如下图所示,单击该句子将显示光标,您可以直接编辑。请编辑为自由字符串并尝试显示。


9.jpg

字体预览字符串可以直接重写

(B)如何使用Google字体选择所需的字体并准备使用

确定要使用的字体后,让我们在您的网站上提供该字体。程序很简单。1.选择字体单击字体右上角可见的[+]按钮(下图中的黄色箭头)。然后按钮将变为[ - ](下图中的蓝色圆圈)。这是选择状态。当有一个或多个所选字体时,屏幕底部会显示黑条,并显示所选项目的数量(下图中蓝色箭头的目的地)。如果您要使用多种字体,可以根据需要单击多次一次选择它们。如果要取消选择,请单击[ - ]按钮。

10.jpg

通过单击字体右上角可见的[+]按钮,可以选择该字体

2.问题用于使用选择字体的画面在屏幕的底部,然后点击“×族所选择的”所选择的字体数显示黑色带部分,如图(上图蓝色箭头),所选择的您可以选择使用字体的设置和来源。

11.jpg

要显示使用所选字体的信息,请单击黑带

3.选择所需的字体一样(※可选)如果单击“自定义”,在下方的蓝色箭头图向前看,你会看到一个复选框以选择所选字体的字体和字符类型。如果除了标准选择的内容之外还有其他想要使用的内容,请添加并检查。检查得越多,添加的字体越多。为了最大限度地减少加载所需的时间,最好将注意力集中在必要的项目上。

12.jpg

如有必要,单击“自定义”以添加字体或字符类型

3-1。选择字体在上图中的绿框区域中,选择要使用的字体的字体。这里可以看到哪些项目取决于字体。如上所示,存在诸如光(常规),常规(正常),粗体(粗)等多种字体类型的情况,并且存在仅准备一种类型的情况。3-2。选择字母类型在上图黄色框中,选择要使用的字母类型。如果只显示字母,数字和符号,如果只选择“拉丁语”,则没有问题。此外,还有一些字体可供选择,如希腊语(希腊字母),西里尔字母(西里尔字母)等,所以请检查是否有必要。还有许多字体只有“拉丁文”可用。4.用于读取的字体,源用于复制源通过点击“嵌入”,看起来超出蓝色箭头在下面的图中,将源极两种类型的显示,用于读取所选择的字体。通过复制和粘贴这些,您可以使用所选字体。

13.jpg

复制源以加载Web字体

4-1。用于加载Web字体的HTML或CSS源上图中绿框中显示“嵌入字体”项具有读取Web字体文件的源。在“标准”一侧,写入HTML源中的读取源,并在“@ IMPORT”侧写入CSS源中的读取源。请使用任何方便的方法。4-2。应用Web字体的CSS源上图中黄色框中显示 “在CSS中指定”项目显示了如何编写CSS源以应用加载的Web字体。请在实际使用时复制并使用指定的字体。

使用Google字体的示例

例如,要使用字体“Comfortaa”,请执行以下操作。请描述“1A + 2”或“1B + 2”的一个组合。■ 1A。读取Web字体文件(HTML版本)首先,在HTML源代码的head元素中添加“嵌入字体”项中描述的源。源有一个链接元素,如下所示。

<link href =“https://fonts.googleapis.com/css?family=Comfortaa”rel =“stylesheet”>

※“?家庭=”由于后立即写字体的名称,它不是每次都需要从网络上确认源如果字体的名称是已知的。应当注意的是,如果它们包含的字体名称空间(写成如果“打开三世”,“开放+三世”)中的“+”,并用符号代替它。■ 1B阅读(CSS版)的Web字体文件有好几页,你想利用的,如果网站的字体,如果加载共同与页面的CSS文件已经存在,在CSS侧而不是HTML端的Web字体它更容易加载。这样,您就不需要为每个HTML文件添加相同的内容。在这种情况下,请单击“@ import”选项卡以显示CSS的源并将其添加到CSS源。源是一行,如下所示。

@import url('https://fonts.googleapis.com/css?family=Comfortaa');

■2。使用字体的CSS源(font-family属性值)接下来,将“在CSS中指定”项中列出的源添加到CSS源。复制和粘贴是很好的。对于“Comfortaa”字体,将发布以下CSS源。

font-family:'Comfortaa',草书;

例如,如果要使用此字体显示h1元素,请按如下方式编写CSS。

h1 { font-family:'Comfortaa',草书;}

如上所述,h1元素的字符将以所选字体“Comfortaa”显示。■ Web字体可以像这样轻松使用,您可以非常轻松地使用任何Web字体。下图是使用三种字体的试用示例。要使用浏览器实际显示它,请参阅示例页面。请注意,Web字体功能会下载整个字体文件,因此随着使用的字体数量的增加,下载时间会变长。

14.jpg

使用三种字体“Cagliostro”,“Fredoka One”和“Comfortaa”显示来自Google Fonts的示例

2.通过上传字体文件直接使用的Web字体描述

15.jpg

CSS源使用Web字体

您还可以编写CSS以在Web上自行上载字体文件,并使用它来显示字母而无需使用Web字体提供服务。如果要使用自己的字体在网站上显示,可以使用此方法轻松显示具有所需字体的字符。要读取Web上的字体文件,请在CSS中编写以下源代码。上一页介绍的“Google字体”中提供的CSS内容只包含以下描述。

@ font-face { font-family:字体名称; src:url(' font file name ')格式(“ 类型名称 ”);}

可以为字体名称指定任意名称。我们将它命名为与其他字体不重叠的名称。■ 在为了能够使用Web字体例子说明:例如,在“WF”目录下的字体文件“freefont.otf”中的OpenType格式,如果你希望能够以名称“MyWebFont”的使用,下面编写CSS如图所示。

@ font-face { font-family:MyWebFont; 源:URL( ' ./Wf/freefont.Otf')格式( “ OpenType字体 ”);}

通过如上所述定义字体名称,只能通过使用font-family属性指定字体名称来使用它,如下所示。

h1 { font-family:MyWebFont;}

在上面的示例中,指定了“MyWebFont”字体用于显示h1元素。之前上传的字体“freefont.otf”将用于显示h1元素中的字符。■ 如果字体在本地环境中,请不要下载说明:在上面的描述方法中,始终下载字体文件。如果字体已经安装在本地环境中,那将是无用的下载。为避免这种情况,我使用如下的本地描述。

@ font-face { font-family:MyWebFont; 源:本地( “MyWebFont”),地址( './ Wf的/ Freefont.Otf')格式( “ OpenType字体”);}

在上面的例子中,如果在本地环境中有一个名为“MyWebFont”的字体,它将用于显示。如果本地环境中没有名为“MyWebFont”的字体,则将从Web读取freefont.otf文件。

请注意字体文件的大小

在具有许多字符(如日语)的语言中,字体文件的大小也会增加。罗马字体和,如字体,这是记录在日本字体只能在“平假名和片假名”,除非它是一个小的字体大小,请注意,这需要很长的时间来下载字体文件。※如日本的Web字体提供将在后面描述的服务,实际上仅限于在页面中用于传递字体字符,也就是,以减少下载大小的服务。

请注意字体许可证

16.jpg

免费日语字体“ Rounded M + ”,也可以用作Web字体

未经许可,您无法上传和使用附加到操作系统或软件包软件的字体文件。有许多日语字体可以免费使用,但有些情况下会添加“如果用作Web字体付费”等条件,请注意。只要将其标记为自由字体,就不能将任何内容作为Web字体上传。请仔细检查许可证说明。由于Web字体是新功能,因此字体作者可能不会将使用形式假定为Web字体(在创建使用条件时)。如果您没有明确指出它可以用作Web字体,请联系作者或分销商。

3.日语Web字体服务:使用Morisawa“TypeSquare”

还有一种提供日文字体的Web字体服务。例如,Morisawa是一家主要的字体销售代理商,提供许多带有Web字体服务“ TypeSquare(Type Square) ”的日文字体。在撰写本文时,有866种字体。

17.jpg

Web字体服务“TypeSquare”,可以使用许多漂亮的日文字体

TypeSquare是已经为每个PV(页面浏览量)和使用付费服务费用的字体一个月数,但也有可免费使用只有1字体以每月10 000 PV的课程。■ 在巨大的日文字符,限制使用是必须提供的字体字符日文字体是因为有很多字,是有整体缺点在于它需要很长的时间来下载的字体集。但是,TypeSquare旨在通过仅将字体分发给网页上实际使用的字符来最小化下载的字体数据的大小。利用该规范,可以通过尽可能多地下载字体数据来防止显示速度降低。

如何使用日语Web字体提供服务TypeSquare

首先,您需要通过单击TypeSquare站点左端的“新注册”按钮注册为成员。由于有多个合同计划,请在“ 使用计划 ”页面上确认详细信息。还有一个免费的计划。仅限会员注册不会花费您。

18.jpg

使用TypeSquare的“新注册”创建一个帐户

会员注册后,您将能够登录名为“我的页面”的TypeSquare控制面板,如下所示。从这里,您可以检查使用状态,设置要使用的字体,并参考字体介绍方法。

19.jpg

TypeSquare的“我的页面”TOP

准备在TypeSquare中使用所需的日语Web字体

对于要通过TypeSquare使用Web字体的网页,您需要加载指定的JavaScript。此外,可以使用的字体数量取决于合同计划,因此您需要注册要使用的字体名称以及要提前显示的网站的URL。按以下步骤执行这些任务。■ 1。显示计划设置详细信息屏幕单击左侧菜单中“计划·选项设置”(※下图中的黄色箭头),显示合同计划列表,然后单击“确认/编辑”按钮(※单击下图中的绿色箭头。

20.jpg

合同计划的“计划·选项设置”→“确认·编辑”按钮

■ 2。复制并粘贴仅计划标记(TypeSquare JavaScript)要使用TypeSquare提供的日语Web字体,需要在网页上添加HTML源“仅计划标记”。要描述的信息源在下图中以红色圆圈显示,请按原样复制和粘贴。

21.jpg

使用TypeSquare提供的日语Web字体的脚本

■ 3。指定要使用的字体和站点的URL向下滚动此页面,可以使用“使用字体”(黄色箭头的目标)和“注册站点”的注册按钮你可以看到绿色箭头)。在前者中,注册“您要使用的字体名称”,在后者中,注册“使用Web字体的站点的URL”。如果您未在此处注册,则不会加载Web字体,因此请不要忘记注册。稍后将描述如何选择字体。

22.jpg

指定要使用的日语Web字体名称以及要显示的站点的URL

选择字体时,显示“字体名称”和“如何编写以该字体显示的字体系列属性”,如下所示。

23.jpg

指定要使用的日语Web字体后的显示示例

可注册的字体数量和可发布网站的数量因合同课程而异。在免费计划的情况下,两者都是一个。上图是免费计划的显示示例,它显示为“没有空缺”,因为它是您已经逐一注册的情况的屏幕。※您只能在上面注册的网站上使用TypeSquare的Web字体显示字符。请注意,未在此处注册的站点或本地放置的HTML文件中未加载Web字体。■ 当您想要使用站点中指定的日语Web字体时的描述例如,如果您想使用日语字体“New Goline”,您可以使用“font-family:New Goline或Shin”由于它被发布为“Go Line”,因此在CSS源代码中将其写入如下。

font-family:“ New Go Line”;

font-family:“ Shin Go Line”;

以上描述中的任何一个都可以以“New Go line”字体显示。请务必准确输入字体名称中包含的空白字符。另外,如果字体名称中包含空格,请务必将其用引号括起来,所以一定不要忘记它。现在您已准备好使用Web字体。

如何查找和使用所需的日语字体

由于TypeSquare有许多日文字体,因此首先需要找到所需的字体。请按以下操作方法搜索。■搜索所需的日语字体TypeSquare从站点顶部的菜单中单击“字体列表”(下图中的黄色箭头),以显示可用字体列表作为Web字体。由于有许多数字,因此可以使用“字体搜索”功能(下图中的绿色箭头等)缩小范围。缩小的结果显示在搜索列底部的列表中。

24.jpg

从字体列表中搜索所需的日语字体

■检查所需的字体名称通过上述字体搜索功能缩小的结果将以“字体名称”+“显示样本”的形式枚举,如下所示。注册所使用的字体时,此处显示的字体名称是必需的,因此如果找到所需的字体,请将该名称保留下来。

25.jpg

日语Web字体搜索结果示例(可在列表中看到字体名称和显示示例)

CSS Web字体功能,可以显示所需字体的字符

这一次,我们介绍了三点,如何使用Google字体,如何描述CSS,如何使用TypeSquare,作为一种使用浏览器下载字体文件进行显示的Web字体的方式。请尝试使用提供Web字体的各种服务使用所需的字体。

点此关闭窗口

快捷键ESC

手机浏览更方便:

如何使用CSS Web字体:Google字体和日语字体