简体   繁体   English

如何在 Visual Studio 代码中使字体系列草书?

[英]How to make font-family cursive in visual studio code?

I am attempting to make the font-family cursive using visual studio code.我正在尝试使用 Visual Studio 代码使字体系列草书。 I am starting a boot camp so experience level is zero.我正在开始一个新兵训练营,所以经验水平为零。 I have tried multiple things and can not figure it out.我已经尝试了多种方法,但无法弄清楚。

You can try,你可以试试,

settings > text editor > font > font family > cursive设置>文本编辑器>字体>字体系列>草书

enter image description here在此处输入图像描述

At first, I thought you were asking how to make Visual Studio Code show cursive in the text editor itself.起初,我以为您在问如何使 Visual Studio Code 在文本编辑器本身中显示草书。 You have tagged CSS and Fonts, however, so I will answer how to make a CSS font-family property be cursive.但是,您已经标记了 CSS 和 Fonts,所以我将回答如何使 CSS 字体系列属性为草书。 If this is not the answer you are looking for please let me know.如果这不是您正在寻找的答案,请告诉我。

There are several cursive font families to choose from.有几种草书字体系列可供选择。 This example uses "Brush Script MT" and fallback family values.此示例使用“Brush Script MT”和备用系列值。 I am targeting all paragraph tags with this, you will need to decide if you want to narrow the focus to a more specific/different Tag, Id, or Class.我的目标是所有段落标签,您需要决定是否要将焦点缩小到更具体/不同的标签、Id 或 Class。

For simplicity sake, I am using Internal CSS (CSS rules defined at top of HTML page).为简单起见,我使用的是内部 CSS(在 HTML 页面顶部定义的 CSS 规则)。 In a real-world application, you would typically use External CSS, in which an HTML page will reference a separate CSS page.在实际应用中,您通常会使用外部 CSS,其中 HTML 页面将引用单独的 CSS 页面。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}

p {
  font-family: 'Brush Script MT', 'Brush Script Std', cursive;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a cursive paragraph.</p>

</body>
</html>

These are the sites I found to reference, you should look them up for more detailed research.这些是我找到参考的网站,您应该查找它们以进行更详细的研究。 Note: I have provided a link to a page that shows several different cursive font-families, in my tests, not all of them worked for me.注意:我提供了一个页面链接,该页面显示了几个不同的草书字体系列,在我的测试中,并非所有字体都适合我。 It is always important to test your work and to test in different browsers and versions of browsers that you plan on supporting.测试您的工作并在您计划支持的不同浏览器和浏览器版本中进行测试总是很重要的。

Focusing on the Visual Studio Code portion of the question, you may add an extension that allows you to see a live preview of your HTML/CSS page.着眼于问题的 Visual Studio 代码部分,您可以添加一个扩展,允许您查看 HTML/CSS 页面的实时预览。 I found a quick video that is easy to follow which shows you how to install and use this extension.我找到了一个易于理解的快速视频,它向您展示了如何安装和使用此扩展程序。 If you copy and paste the provided html page into an HTML file in VS Code, you can see the CSS Cursive font family in action.如果您将提供的 html 页面复制并粘贴到 VS Code 中的 HTML 文件中,您可以看到 CSS Cursive 字体系列的实际效果。

Live preview HTML code in browser with Visual Studio Code使用 Visual Studio Code 在浏览器中实时预览 HTML 代码

Happy coding!快乐编码!

Kindly go to -请 go 到 -

settings > text editor > font > font family settings > text editor > font > font family

then type然后输入

'Fira Code iScript'

First you need to download & install the font in your system, if not present.首先,您需要在系统中下载并安装字体(如果不存在)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM