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

Question

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

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

我已经将以下字体下载到我的 table ​​面上。以下是我想插入到我正在使用的网站中的字体。

• titilliumtext14l-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

如有必要，请先在您的机器上安装字体。然后，在您的用户设置 JSON 文件(File > Preferences > User Settings)中，覆盖 editor.fontFamily，如下所示:

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

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