css外部引用-介绍一下外部自定义字体的使用？

bendan520 2023年8月21日 css 0

1.如何导入和使用外部自定义字体？

产品小姐说笔记本自带的字体太短了，需要用炫酷的字体。 产品小姐已经发话了，所以我们要引入外部自定义字体。

要引用外部自定义字体，需要在CSS3上使用@font-face，通过@font-face可以使用任何你喜欢的字体。

一般情况下，我们只会从UI中获取一种格式的字体，但是不同浏览器支持的字体格式不同，所以我们需要先对字体进行转换。 推荐使用这个网站进行字体转换：。

在项目目录下，新建一个fonts文件夹，将转换后的字体文件复制到该文件夹​​中，并新建一个font.css文件。

2、代码怎么写？

在font.css文件中引入字体：

@font-face {
  /* 自定义的字体名字 */
  font-family: 'myCoolFont';
  /*本地的字体地址*/
  src: url('./dsdigi1-webfont.eot'); /* IE9 Compat Modes */
  src: url('./dsdigi1-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
  url('./dsdigi1-webfont.woff') format('woff'), /* Modern Browsers */ 
  url('./dsdigi1-webfont.woff2') format('woff2'), /* Modern Browsers */
  url('./dsdigi1-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
  url('./dsdigi1-webfont.svg#myCoolFont') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

css外部引用_引用外部css文件_引用外部css文件不起作用

在页面中使用导入的外部字体：

  <link rel="stylesheet" href="../normal/fonts/font.css">
  <style>
    body {
      background: #090822;
    }
    .my-font {
      font-size: 60px;
      font-family: 'myCoolFont'; /*自定义的字体名字*/
      color: #07c6ff;
    }
  </style>
</head>
<body>
  <div class="my-font">9527</div>
</body>

您可以从这个网站下载所需的字体，也可以在上面识别和转换字体。

3.联通Web开发字体格式选择

css外部引用_引用外部css文件_引用外部css文件不起作用

.ttf

TrueType 是 Type 1（由 Adob​​e 开发）的竞争产品。 它是由苹果和谷歌联合开发的。 它是 Mac 和 Windows 系统中使用最广泛的字体。 一般从网上下载的字体文件都是ttf格式，只能通过点击系统来安装。

.otf

OpenType，TrueType是OpenType的前身。 20世纪90年代，谷歌未能寻求苹果的GX排版技术授权，被迫自创武功，命名为TrueType Open。 后来，随着计算机的发展，排版技术需要越来越多表现力的字体。 Adobe 和 Google 联合开发了一款名为 OpenType 的新字体，该字体继承了 Type 1 和 TrueType Open 的底层技术。 后来，OpenType被ISO组织接受为标准，称为Open Font Format（关闭）。

css外部引用_引用外部css文件不起作用_引用外部css文件

.eot

Embedded Open Type主要用在早期版本的IE中。 微软按照OpenType对其进行了压缩，并将其更名为Embedded OpenType。 它是其专有格式，具有版权保护和压缩功能。 ttf和otf字体在web端的兼容性是比较好的。 除IE和早期的ios safari及Android外，其他浏览器均兼容。 不过由于ttf和otf太大，仍然可以满足桌面浏览器时代的需求。 在移动浏览器时代css外部引用，5MB或10MB的字体文件变得太大。 因此，Google 在 OpenType 的基础上优化了压缩，相比 OpenType 大大减小了体积，但不仅 IE 以外的浏览器不支持，因此并没有成为行业标准。

.woff

Web Open Font Format，可以看作是ttf的重新封装，增加了压缩和字体源信息，通常比ttf小40%。 2010年4月8日，Mozilla基金会、Opera软件公司和谷歌提交WOFF后，​​万维网联盟评论称，希望WOFF很快成为“所有浏览器都支持的单一、可互操作（字体）格式”。 ”。2010年7月27日，万维网联盟发布了WOFF作为工作草案。它也是当前网络字体的主流格式。

css外部引用_引用外部css文件不起作用_引用外部css文件

woff 字体文件浏览器兼容性

.woff2Web Open Font Format 2.0，与woff相比，最大的优化应该是加强了字体压缩比。 相同字体内容下，woff2比woff小20%到30%。

woff2 字体文件浏览器兼容性

综上所述

对比总结，我们都会发现，虽然由于历史原因css外部引用，很多老设备的浏览器不支持.woff文件，但是考虑到目前的兼容性和文件大小优势，我们在开发联通Web时可以优先使用.woff2，如果需要兼容更多低版本设备，可以考虑使用.woff。

将 HTML 元素放在网页上的中心似乎是一件简单的事情。 至少在个别情况下是这样，但复杂的布局通常会导致某些解决方案无法正常工作。

在网页布局中水平居中元素比垂直居中元素要简单得多，而且同时实现水平居中和垂直居中往往是最困难的。 现在是响应式设计的时代，我们很难准确地知道元素的确切高度和厚度，所以有些解决方案不适用。 据我所知，CSS 中至少有六种居中技术。 我将使用以下 HTML 结构从简单到复杂开始：

鞋子图像将会改变，但它们的尺寸将保持 500pxX500px。 HSL颜色用于使背景颜色一致。

使用 text-align 水平居中

有时显而易见的解决方案是最佳选择：

分区中心 {

文本对齐：居中；

背景：hsl(0, 100%, 97%);

分区中心图像 {

宽度：33%； 高度：自动；

该解决方案不会使图像垂直居中：您需要给出

使用边距：自动居中

这种水平居中的方法与之前使用文本对齐的方法具有相同的局限性。

分区中心 {

背景：hsl(60, 100%, 97%);

分区中心图像 {

显示：块；

宽度：33%；

高度：自动；

保证金：0 自动；

注意：必须使用display: block才能使margin: 0 auto对img元素有效。

使用表格单元格居中

使用display:table-cell，而不是使用table标签； 可以实现水平居中和垂直居中，但这些技术需要添加额外的元素作为外部容器。

CSS：

.居中对齐{

显示：表；

背景：hsl(120, 100%, 97%);

宽度：100%；

.center-核心{

显示：表格单元格；

文本对齐：居中；

垂直对齐：居中；

.center-core img {

宽度：33%；

高度：自动；

注意：为了让div不塌陷，必须加上width:100%，并且要给外容器元素加上一定的高度，让内容垂直居中。 设置 html 和 body 的高度后，您还可以将元素在 body 中垂直居中。 该方法对IE8+浏览器生效。

使用绝对定位居中

该解决方案具有非常好的跨浏览器支持。 一个缺点是您必须显式声明外部容器元素的高度：

.绝对对齐{

位置：相对；

最小高度：500px；

背景：hsl(200, 100%, 97%);

.绝对对齐img {

宽度：50%；

最小宽度：200px；

高度：自动；

溢出：自动；

保证金：自动；

位置：绝对；

顶部：0； 左：0；

底部：0； 右：0；

斯蒂芬在他的博客上演示了这些场景的几种变体。

使用平移到中心

Chris Coiyer 提出了一种使用 CSS 转换的新解决方案。 还支持水平居中和垂直居中：

。中心 {

背景：hsl(180, 100%, 97%);

位置：相对；

最小高度：500px；

.center img {

位置：绝对；

顶部：50%； 左：50%；

变换：翻译（-50%css背景居中，-50%）；

宽度：30%； 高度：自动；

但也有几个缺点：

CSS 转换在某些浏览器上需要前缀。

不支持IE9以下浏览器。

需要设置外容器的高度（或者通过其他方法设置），因为无法获取绝对定位内容的高度。

如果内容包含文本，现代浏览器合成技术会模糊文本。

使用 Flexbox 居中

当新旧句型和浏览器前缀的差异消失时，这种方法将成为主流的居中解决方案。

。中心 {

背景：hsl(240, 100%, 97%);

显示：柔性；

调整内容：居中；

对齐项目：居中；

.center img {

宽度：30%； 高度：自动；

从很多方面来说，flexbox 都是一个简单的解决方案，但它有新旧句型，并且缺乏早期版本 IE 的支持（尽管 display: table-cell 可以作为后备解决方案）。

现在规范已经最终确定并且大多数现代浏览器都支持它，我写了一个详细的教程。

使用 calc 居中

个别情况下比flexbox更全面：

。中心 {

背景：hsl(300, 100%, 97%);

最小高度：600px；

位置：相对；

.center img {

宽度：40%；

高度：自动；

位置：绝对；

顶部：计算（50% - 20%）；

左：计算（50% - 20%）；

很简单，calc 允许您根据当前页面布局来估计规格。 在前面的简单估计中，50%是容器元素的中心点，但如果只设置50%，图像的左上角就会与div的中心对齐。 我们需要将图片向左移动联通图片宽度和高度的一半。 计算公式为：

顶部：计算（50% - (40% / 2))；

左：计算（50% - (40% / 2))；

在今天的浏览中css背景居中，你会发现当内容的宽度和高度是固定规格时，这种方法更适合：

.center img {

宽度：500px； 高度：500px；

位置：绝对；

顶部：计算（50% - (300px / 2));

左：计算（50% - (300px - 2))；

我在这篇文章中详细解释了 calc。

该解决方案有许多与flex相同的缺点：虽然它在现代浏览器中有很好的支持，但在早期版本中仍然需要浏览器前缀，并且不支持IE8。

.center img {

宽度：40%； 高度：自动；

位置：绝对；

顶部：计算（50% - 20%）；

左：计算（50% - 20%）；

当然还有其他更多的选择。 了解了这六种解决方案后，Web开发人员在面对居中元素时会有更多选择。