所有网络浏览器和移动设备支持的字体
[英]Font supported by all web browsers and mobile devices
问题描述
I have a 
我有一个
tag where the font for the text to be displayed is "Lato". 标签，其中要显示的文本的字体为“拉托”。 I have mentioned it in my CSS code. 我已经在我的CSS代码中提到了它。 The problem is it's not displaying text in font "Lato" when hosting it in different laptops or mobile phones. 问题在于，将其托管在不同的笔记本电脑或移动电话中时，不会以“ Lato”字体显示文本。 It's working properly only in my device. 它只能在我的设备上正常工作。 So how to set fonts globally so that my webpage using my fonts exactly what I have mentioned in CSS for all devices. 那么如何在全局范围内设置字体，以使我的网页使用的字体与我在CSS中为所有设备所述的字体完全一样。
I have installed the .ttf file in my laptop 我已经在笔记本电脑中安装了.ttf文件
4 个解决方案
解决方案1
2 2019-05-17 05:12:11
You need to include the font in the web page so that the clients have it available. 您需要在网页中包括该字体，以便客户端可以使用它。 You can't expect everyone to download and install the font themselves in order for your site to look right. 您不能指望每个人都自己下载并安装字体以使您的网站看起来正确。
Add this to your head tag of your website. 将此添加到您的网站的head标签中。
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
For more information on how this works, read https://fonts.google.com/selection?selection.family=Lato 有关其工作原理的更多信息，请阅读https://fonts.google.com/selection?selection.family=Lato
解决方案2
1 已采纳 2019-05-17 05:11:44
The issue here is that you have installed the font directly on your device so you are able to view it but since every device won't have the font installed you are seeing a fallback CSS font which is getting rendered automatically. 这里的问题是，您已经在设备上直接安装了字体，因此可以查看它，但是由于每个设备都没有安装字体，因此您看到的是后备CSS字体，该字体会自动呈现。
Lato is a open source font from Google Fonts and is directly hosted on the Google CDN. Lato是Google字体的一种开源字体，直接托管在Google CDN上。 You can use the font directly from there to make sure it is rendered perfectly on any device. 您可以直接从那里使用字体，以确保在任何设备上都能完美呈现。
Add the below line inside your <head> tag in your HTML file. 在HTML文件的<head>标记内添加以下行。
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
And you can add the font to your CSS like below - 您可以将字体添加到CSS，如下所示：
font-family: 'Lato', sans-serif;
/*sans-serif is the fallback font family here*/
You can read more about the Google Fonts API over here . 您可以在此处详细了解Google Fonts API。
解决方案3
1 2019-05-17 05:11:52
This is not how we use fonts in web projects. 这不是我们在Web项目中使用字体的方式。
First of all you need web font for lato.
首先，您需要lato的网络字体。 you can download it online or you can convert normal font (ttf) to web font from here . 您可以在线下载它，也可以从此处将常规字体（ttf）转换为Web字体。 Put these font files(woff) in your project folder.
将这些字体文件（woff）放在项目文件夹中。 Add css font face in you css then use the font family.
在您的CSS中添加CSS字体，然后使用字体系列。 Or you can use Webfont Lato from google fonts.
或者您可以从Google字体使用Webfont Lato。
add this in your Head 将此添加到您的头部
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
and in your CSS 并在您的CSS中
font-family: 'Lato', sans-serif;
ask me anything else, or something is not clear. 问我其他问题，或者不清楚。
解决方案4
0 2019-05-17 06:45:29
To embed these fonts into a webpage, copy this code into the of your HTML document. 要将这些字体嵌入到网页中，请将此代码复制到HTML文档的中。
STANDARD @IMPORT
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Specify in CSS - Use the following CSS properties to specify these families: 在CSS中指定-使用以下CSS属性指定这些系列：
font-family: 'Lato', sans-serif;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.