when I increase font size 0 to 30px. It increased the font-size as well as font-weight too. But, I want to only increase font-size without increasing font-weight. The below Image is when I increase the font-size.

However, I want to make it like this one.

Could you help me with this? It would be really appreciated it!

CodePudding user response：

Use transform: scale(.5, 1);, which will set the text to be 50% normal width, but 100% normal height, and then you can set font-size to something large enough for you. In addition, your text seems to be a bit opaque, so I'm also setting opacity to 0.7, but you might not want that...

p {
  display: inline-block;
  font-size: 50px;
  transform: scale(.50, 1);
  opacity:0.7;
}

<p>Hello, friend!  안녕 친구!</p>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Or, make it even thinner, at 0.25/1 ratio....

p {
  display: inline-block;
  font-size: 50px;
  transform: scale(.25, 1);
  opacity:0.7;
}

<p>Hello there!  안녕 친구!</p>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Set a value under the 100 is not possible, but your could try to use this:

font-weight: lighter !important;

Remember to catch your tags with an ID or some classes to do more priority to your css code. Maybe your problem is an override.

For example:

//CSS selector specificity = 111
p#yourId.firstClass{
  font-weight: 300;   //this style is applied
}

//CSS selector specificity = 100
#yourId{
  font-weight: 100;   //this is overridden by the first
}

CodePudding user response：

You can try using -webkit-text-stroke - despite the prefix, it works in all browsers besides IE.

The one draw back is that your text would have to be on a solid color.

h1 {
  font-size: 100px;
}

h1.stroke {
  -webkit-text-stroke: 2px white;
}

<h1>Big font</h1>

<h1 class="stroke">Big font stroke</h1>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try made font-weight the default value in body section in css like

body
{
    font-weight:100px;
}

And then the font-weight will be for all 100px whatever the font-size is .