Question

我在编码方面相当新，我正在努力解决以下问题。我已经在网上多次搜索如何将VScode中的字体更改为不同的字体，以匹配我需要完成的项目中使用的字体。

我已经在stackoverflow上看了这篇文章，但在做了答案之后，我仍然看不到我选择的字体，进入＆＃34;文件＆gt;后我就无法使用它们了。偏好＆gt;用户设置＆＃34;并覆盖＆＃34; editor.font-family＆＃34; ： How to use custom font in visual studio code

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

titilliumtext14l-600wt.otf
OpenSans-Semibold.ttf
OpenSans-Regular.ttf
无数-Pro_31655.ttf

以下是＆＃34;默认设置＆＃34;

//通过将设置放入设置文件来覆盖设置。 //有关最常用的设置，请参阅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,

我不确定是否有必要在我的＆＃34; main.css＆＃34;中包含我所拥有的内容。但这只是为了以防万一。

＆＃13;

/** 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;
}

＆＃13;

感谢您的时间。

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文件（文件＆gt;首选项＆gt;用户设置）中，覆盖editor.fontFamily，如下所示：

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

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

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

2 个答案: