Question

我正在尝试使用HTML和CSS，让程序读取一个文本文件并将其写在图像上，我设法读取了该文件，但是我找不到改变字体，大小的方法。这封信，等等。

这里是所有代码。

<style type="text/css">
	@font-face {
		font-family: "Montserrat";
		src: url(https://fonts.googleapis.com/css?family=Montserrat:400,700) format("truetype");
	}
	p.montserrat { 
		font-family: "Montserrat", Verdana, Tahoma;
	}
</style>

<p style="overflow: hidden; float: left;">

	<img style="margin: 0px 0px -74px 0px;" src="NewOverlay.png" />
	<div style="position: absolute; top: 95px; left: 60px;">
		<object type="text/plain" data="sub.txt" width="400" height="300"></object>
	</div>
</p>

Answer 1

您的CSS选择器指定<p>需要类'montserrat'。您需要<p class="montserrat">才能正常工作（或将选择器更新为p-删除.montserrat）。我还更新了以下标记，以将<div>更改为<span>的有效性。

<p class="montserrat" style="overflow: hidden; float: left;">
   <img style="margin: 0px 0px -74px 0px;" src="NewOverlay.png" />
   <span style="position: absolute; top: 95px; left: 60px;">
      <object type="text/plain" data="sub.txt" width="400" height="300"></object>
   </span>
</p>

Answer 2

您好，如果您正在寻找一种更改大小的方法。这可能是一个解决方案，它将更改字体大小并使其缩放。取决于监视器。

<style type="text/css">
        @font-face {
            font-family: "Montserrat";
            src: url(https://fonts.googleapis.com/css?family=Montserrat:400,700) 
    format("truetype");
        }
        p.montserrat { 
            font-family: "Montserrat", Verdana, Tahoma;
            font-size: 2vw; 
/* This will make the font scale to 2% of width of the monitor.
    You can also specify a second value: font-size: 2vh; 
     That would make it scale to the height of the monitor too
      You could also tinker a bit with them together seperated by,
       a comma.*/
        }
    </style>

更改字体和大小，CSS

2 个答案: