如何将我选择的新字体添加到 Visual Studio 代码中？

Question

我对编码相当陌生，并且正在努力解决以下问题。 我在网上搜索了很多次如何更改 VScode 中的字体以匹配我的项目中使用的不同字体。

我已经尝试了这篇文章的建议，但我仍然看不到我选择的字体，并且在进入“文件>首选项>用户设置”并覆盖“editor.font-family”后我无法使用它们：

我已经将以下字体下载到我的桌面上。以下是我想插入到我正在开发的网站中的字体。

• titiliumtext14l-600wt.otf
• OpenSans-Semibold.ttf
• OpenSans-Regular.ttf
• Myriad-Pro_31655.ttf

这里是“默认设置”

// 通过将设置放入设置文件来覆盖设置。 // 请参阅 http://go.microsoft.com/fwlink/?LinkId=808995 了解最常用的设置。 {

//编辑器

// Controls the font family.
"editor.fontFamily": "Consolas, 'Courier New', monospace",

// Controls the font weight.
"editor.fontWeight": "normal",

// Controls the font size in pixels.
"editor.fontSize": 14,

我不确定是否有必要将我的内容包含在“main.css”中，但这里只是以防万一。

/** Fonts **/
@font-face {
    font-family: Titillium, Arial, sans-serif;
    src: url('../assets/fonts/gotham-thin-webfont.eot');
    src: url('../assets/fonts/gotham-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../assets/fonts/gotham-thin-webfont.woff2') format('woff2'),
         url('../assets/fonts/gotham-thin-webfont.woff') format('woff'),
         url('../assets/fonts/gotham-thin-webfont.ttf') format('truetype'),
         url('../assets/fonts/gotham-thin-webfont.svg#gotham_thinregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Archivo Narrow, Arial, sans-serif;
    src: url('../assets/fonts/gotham-black-webfont.eot');
    src: url('../assets/fonts/gotham-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../assets/fonts/gotham-black-webfont.woff2') format('woff2'),
         url('../assets/fonts/gotham-black-webfont.woff') format('woff'),
         url('../assets/fonts/gotham-black-webfont.ttf') format('truetype'),
         url('../assets/fonts/gotham-black-webfont.svg#gotham_blackregular') format('svg');
    font-weight: bold;
    font-style: normal;
}

/** Global **/
html, body{
    background-color:#fff;
    color:#000;
    font-family: Titillium web, Arial, sans-serif;
    overflow-x:hidden;
    font-weight:light;
}
h1, h2, h3, h4, h5{
    font-family:latoregular;
}
h1{
    font-size: 50px;
    font-weight:bold;
    color: #fff;
}
h2{
    font-size: 24px;
    color: #000;
    font-family: sans-serif;
}
h2 span, h3 span{
    color:#ff8200;
}
h3{
    font-size:24px;
}
h4{
    font-size:18px;
}
h5{
    font-weight: bold;
    font-size:20px;
    font-family:latoregular;
    font-weight:lighter;
    margin-bottom: 40px;
}
p{
    font-size: 16px;
    line-height: 2.0;
}

Answer 1

您更改的设置与 Visual Studio Code 本身相关，您正在更改 Visual Studio Code 的字体。

要为您的网站使用字体，您可以将 Google Fonts API 添加到您的标题中，如下所示：

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

然后，转到您的 css 文件：

font-family: "Open Sans";

Answer 2

如有必要，请先在您的计算机上安装字体。然后，在您的用户设置 JSON 文件（文件 > 首选项 > 用户设置）中，覆盖

editor.fontFamily

，如下所示：

// Place your settings in this file to overwrite the default settings
{
    "editor.fontFamily": "Source Code Pro"
}

如果首次安装字体时 VSCode 已经打开，您可能需要重新启动 VSCode。

Answer 3

VSCode 设置（即 VSCode 编辑器中使用的字体不是您为网站设置字体的地方。我不确定他们是否想添加该功能:_(ツ)_/́，但你基本上复制您在您所从事的项目中列出的字体资源是用问题中未提供的计算机语言和框架编写的，但会有有关如何导入字体和图片等资源并在文档中访问它们的文档语言和框架，但不是 VSCode 文档；)。