Stylized initials cause gaps in the text - html

I'm using these google fonts in my web page (I'm also using Bootstrap - don't know if that changes anything, I'm kinda new to this coding thing):
.initial {
font-size: 1.5em;
font-family: 'Euphoria Script', cursive;
}
p {
font-family: 'Open Sans', sans-serif;
}
<html><head>
<link href='https://fonts.googleapis.com/css?family=Euphoria+Script&subset=latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext' rel='stylesheet' type='text/css'></head>
<body>
<p><span class="initial">S</span>ome text here. And some more. We seriously need a lot of text.</p>
</body>
</html>
Problem is that, since the euphoria font is taller, when the line breaks there's more space between the first line and the second than between all the other lines. Is there some workaround? I don't care if the text is near the initial or indented.
Thanks!

Consider using float: left (+ first-letter selector if you don't care with supporting old browsers:
p:first-letter {
font-size: 1.5em;
float: left;
padding-right: 5px;
padding-bottom: 5px;
color: red;
}
See http://jsfiddle.net/zr8qarw9/

Specify the line height on your text, so all text will have the same height despite the difference in the font size. Try this:
.initial {
font-size: 1.5em;
font-family: 'Euphoria Script', cursive;
}
p {
line-height: 1.2em;
font-family: 'Open Sans', sans-serif;
}
<html><head>
<link href='https://fonts.googleapis.com/css?family=Euphoria+Script&subset=latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext' rel='stylesheet' type='text/css'></head>
<body>
<p><span class="initial">S</span>ome text here. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text.</p>
</body>
</html>

Related

Font is NOT resizing with rems

It should be simple, but for whatever reason rem isn't working for me.
For example I have
<div id="big_paragraph">
<p>I will make sure you get upvoted,</p>
<p>if you answer this simple question</p>
<p>for me. Thanks!</p>
</div><!-- big_paragraph -->
And I want the font-size to be responsive, so in my CSS I have
* {
margin:0;
padding:0;
border:none;
}
html{
font-size: 62.5%;
/* I also tried font-size: 16px; to no avail */
}
body{
font-family: 'Muli', sans-serif;
}
#big_paragraph{
margin-top:101px;
font-size: 4.1rem;/*41px*/
text-align:center;
}
I don't know if it matters but I also have the following in my head section of my html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This should work but would probably only work in modern browsers.
.some-paragraph{
font-size: 5vw !important;
}
I believe you have to change it based on the media query. So, cleaning it up a bit, this worked for me. Hope this helps.
body{
font-family: 'Muli', sans-serif;
font-size: 62.5%;
}
#big_paragraph{
margin-top:101px;
font-size: 4.1rem;/*41px*/
text-align:center;
}
#media only screen and (max-width: 720px) {
#big_paragraph {
font-size: 150%;
}
}
<div id="big_paragraph">
<p>I will make sure you get upvoted,</p>
<p>if you answer this simple question</p>
<p>for me. Thanks!</p>
</div><!-- big_paragraph -->
Your code seems to be working just fine for me.
I would however recommend using a class instead of an id so that you can reuse the css if needed later.
I would have made this a comment, but I do not have that ability yet.

custom text css not taking

I am trying to get this specific text I downloaded to take in CSS. I have other fonts that are working. I had to create an image of the text for the H2 line. I want p to have the same text. I would like both of them to work without having to create a png image to have the text I want. I have the text file uploaded into my public folder. This is my CSS code:
p{
padding-top: 30px;
padding-right: 20px;
font-family: "Paper Daisy";
src: url("img.paperdaisy.ttf");
font-size: 20px;
}
Please create your custom font like this
#font-face
{
font-family:yourfontname;
src:url(specify url here) ;
}
Then use the font family u specified whereever u want to.
First of all I'd love to recommend using Google Fonts (https://fonts.google.com/). It's super-easy to use them on your website. You can just choose a font and then use it like this:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Suddenly Paper Daisy is not avaible on Google Fonts, so you'll have to "instal" it to you website. You can find an answer to "How to do it?" on w3schools.com (https://www.w3schools.com/css/css3_fonts.asp).
In your CSS file you use:
#font-face {
font-family: Paper Daisy;
src: url(LINKTOFONT.ttf);
}
And then in the page you want font to work on:
p {
font-family: Paper Daisy;
}

How to align ASCII graphic characters on a webpage?

I am trying to draw a text-based GUI in HTML (just for fun) which looks like an old terminal app and I have ran into a problem:
When I have two lines (divs) and I put graphic characters in them like these:
░░░
░░░
I can't align the lines properly (vertically). If I just put terminal characters in my divs like this:
<div class="line">&blk14;&block;&boxV;&lhblk;&uhblk;</div>
<div class="line">&blk14;&block;&boxV;&lhblk;&uhblk;</div>
there is a little spacing between them. (probably height/line-height issue).
If I style them like this:
.line {
height: 1em;
line-height: 1em;
}
they overlap. I tried to fine-tune the values by hand but it seems that height and line-height does not work together well for example with font-size: 40px and line-height: 40px I have to use a height value of 45.5px. What is the problem with my approach? Is there a simple way to align my lines without fine-tuning?
Note that I zeroed all spacings/margins/paddings and I also checked the calculated css in developer tools so it is not an issue with either of these.
My base css is this:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Code Pro', monospace;
}
I'd add font-family: monospace at least, see fiddle.
But to be honest I'd go with a pre tag and if neccesary spans - and not do line by line div.
I've tested this on the edge browser. I don't know what will happen on other browsers.
Bare in mind that for smaller font sizes (under .5em), some glyphs may become obscured based on monitor resolution, browser, and size.
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Code Pro', monospace;
}
.line {
/* height: 1em; */
/* line-height: 1em; */
font-size: 5em;
}
</style>
</head>
<body>
<div class="line">&blk14;&block;&boxV;&lhblk;&uhblk;</div>
<div class="line">&blk14;&block;&boxV;&lhblk;&uhblk;</div>
</body>
</html>

Fonts are not rendered properly

I have a little experience with css, and learning it day by day, but I need to figure this out.
I have a little problem with defining the styles for the page.
My page contains the following sections:
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
</head>
.
.
.
.
<article>
<header>
<h1 class="txtName">Your pathway to success starts here</h1>
</header>
<p class="txtDesc">
SomeText.................SomeText
</p>
</article>
and I have the .css file containing the following section:
article h1
{
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
The text inside the header is displayed with correct styles, however, text inside the paragraph is not displayed correctly. Looks like it is not recognizing given styles.
It displays the right font-family, but does not recognize font-weight.
What am I doing wrong here? Need some help.
Thank you
Link : https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
As you can see there is styles for fonts like "Light 300 Italic" or "Extra-Bold 800". You must select that styles for bolder or lighter fonts. Then you can use font-weight in css otherwise it doesnt works.
Dont Forget: When you select "light 300" you can use font-weight:300. So font-weight:200 is not make any differences. If you select too much font styles it will take more time to load fonts from google when opening your page. You can see performance indicator on right.
Your link tag should look like
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
You need to include each of the font weights that you want in the URL.
Your styles should be:
article h1
{
color: #0140be;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
You select which font style you want with the font-weight attribute.
JSFiddle

import google fonts on bootstrap

I'm trying to import google fonts, the thing is i follow the steps and actuallyit works if a use
<h3 style="color:white ; font-family:signika; padding:2%"> Whatever </h3>
but what i want to do it's set the Signika font as the default one, so i do
html {
font-family: 'Signika', 'Signika:700' , sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
but it does not wor,i still have to set it in every html tag, i even tried to put it specificly like
h1 {
margin: .67em 0;
font-size: 2em;
font-family:'Signika';
}
but still, not working!
Add this line to your index.html file in the <header>
<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
If font-family: signika works inline use that in the css file too.
html {
font-family: signika, sans-serif;
}
The rule 'Signika:700' would not do anything, what I think you're trying to do should be written as:
font-family: signika;
font-weight: 700;
I figured out i was putting the rule font-family in h1 but that was not the only instance of h1, therefor i had to look further and i found the respective h1 sentence to use the font-family, so it was missplaced after all, thank you for you help, was very useful!