I have reduced my problem to a trivial example:
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="utf-8" />
<style>
body,
h1,
h2,
h3,
h4,
h5 {
font-family: 'Times New Roman', sans-serif
}
body {
font-size: 16px;
font-family: sans-serif;
}
</style>
</head>
<body>
<a> a simple text w </a>
<h1> a simple h1 text w </h1>
<h2> a simple h2 text w </h2>
</body>
</html>
Which I would expect to produce three lines of sans-serif text. The web inspector indicates that all three lines should be sans-serif.
Tested on Chromium and Firefox, I get three lines of text, one sans-serif, and two more, for h1 and h2 in serif font:
What is the explanation of this behavior? What is my misunderstanding of the way font appearances are inherited and applied?
Since you declared Times New Roman for both, the h1 and the h2 elements, they both render with this font.
And since the last definition in CSS has a higher order than the first one, the a elements inherits the style set for the body selector, which is: sans-serif.
This is not an issue, it is as expected.
If you would wrap the <a></a> element inside a (for example) <h3></h3>, you will see, that it will inherit the styles from its parent and displays as serif Times New Roman as well.
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="utf-8" />
<style>
body,
h1,
h2,
h3,
h4,
h5 {
font-family: 'Times New Roman', sans-serif
}
body {
font-size: 16px;
font-family: sans-serif;
}
</style>
</head>
<body>
<a> a simple text w </a>
<h1> a simple h1 text w </h1>
<h2> a simple h2 text w </h2>
<h3>
<a> a simple text w </a>
</h3>
</body>
</html>
Related
So I'm trying to get Roboto Thin working in my CSS through Google Fonts
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:bold&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:thin&display=swap" rel="stylesheet">
I can get the normal Roboto working just fine, but not when I try to specify the thin weight like so:
body {
font: 16px/21px Roboto, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight: thin;
}
It just gives me the regular weight... can anyone see what I'm doing wrong?
thin is not a valid keyword for font-weight. According to Google Fonts (when you select "Roboto" and then look at the "customize" list of weights) Thin corresponds to a weight of 100
If you look at the font source by going to the link in the CSS you can see the light font is weight 100, so you can just do this:
body{
font-family: 'Roboto', sans-serif;
}
.normal{
font-weight: 400;
}
.light{
font-weight: 100;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<!-- 100 is light, 400 is normal -->
<p class="normal">Lorem ipsum</p>
<p class="light">Lorem ipsum</p>
You can get the link by selecting the font in Google Fonts, clicking on the font name in the bottom right hand corner, going to customize and checking all the font weight boxes you need. Then go back to embed and copy the link. Don't just use the weight though - import the link too or you'll get font scaling and spacing problems on Firefox on Ubuntu.
My website includes both English and Japanese characters. The problem is that although they are defined in the same class, they look as if they are different sizes in certain environments. For example, it appears fine on my laptop in Chrome browser, but on my desktop in Chrome browser and in my iphone in Safari browser, the English text appears smaller than the Japanese text.
Below is a snippet of my code:
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
p,
fieldset,
table {
/*so things don't run into each other*/
margin-bottom: 1em;
}
* {
font-size: 14px;
text-align: left;
margin-top: 10px;
margin-bottom: 5px;
}
#container-right {
width: 490px;
float: right;
}
p {
font-family: Libre Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
font-display: block;
vertical-align: top;
}
html {
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"html://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="css.css" media="screen, projection, print" />
<link rel="stylesheet" type="text/css" href="http://st.shinobi.jp/img/services/homepage/commercial.css" />
</head>
<body>
<div id="container-right">
<p>Brown准教授、</p>
</div>
</body>
</html>
Changing the Japanese characters to a different, Japanese language-specific p style had no affect.
The language of the html file is set to "ja," but changing it to English had no affect as well.
Please help!
Sincerely,
Hanako
Solution 1
Select a font that supports both English and Japanese text. This way your text will always be the same height for your text. However, English in these fonts may be quite ugly.
Solution 2
The following steps is under the assumption that Japanese is your primary language on your page and English is secondary. Reverse the instructions below if the opposite is true.
Make sure you load a Japanese and English font into your CSS/HTML. For example, load them from
https://fonts.google.com/
https://fonts.adobe.com/
Your own fonts using https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts#web_fonts
Wrap all of your English text in <span class="english-text"></span>.
For your overall text, set your font family to your Japanese font.
For your .english-text class, set your font family to your English font.
Manually pick font sizes to match English and Japanese.
Explanation
This problem is because the browser cannot find a matching font from your font-family property to render Japanese text. On my Windows Chrome computer, Chrome renders the English text as Garamond but the Japanese text as Yu Gothic.
It seems that when Chrome (and perhaps other browsers as well), despite explicitly specifying font-size: 14px, Chrome will choose an appropriate font size for the different font.
To see the rendered font for some text on Chrome,
inspect the text (by right-clicking and selecting Inspect in the context menu)
Go to the "Computed" styles tab.
Scroll to the bottom to see "Rendered Fonts".
I have this sample html file:
<div style="font-weight: 700; font-size: 3em">
Test font bold (weight = 700)
</div>
<div style="font-weight: 900; font-size: 3em">
Test font bold (weight = 900)
</div>
I do not know why if I change the value of font-weight from 900 to 700 I get the same result. The text does have the same size.
While in this MDN docs page https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight if I change the value from 900 to 700 (with the browser feature of live css change) I get different results.
Not all fonts support all variations of font-weights. If you need something bolder, you would need to choose an alternative font.
Changing your code to have a sans-serif font-family will give you a live example of the difference.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
div { font-weight: 900; font-size: 3em; font-family: sans-serif }
</style>
</head>
<body>
<div>Test font bold</div>
</body>
</html>
I'm going to start with saying I'm a total noob in coding school and to please be kind. I'm attempting to help my husband with his blog: https://directionandpace.com/ There is an issue with the title Direction and Pace.
First, he asked if I can remove title link that redundantly links back to the page. There isn't a way to easily edit WordPress HTML (just the stylesheet) so I thought I'd figure that out later and just change the link color to black instead of blue. ;)
Second, we both realized that when you click on the second page "Who We Are" the title changes to a non bold serif and ITS DRIVING ME CRAZY.
Code Below:
What should be just the body and the only Serif in the CSS:
body, button, input, select, textarea {
color: #776f6f;
font-family: Merriweather, Georgia, serif;
font-size: 15px;
line-height: 2;
}
The CSS for the Title:
.entry-title {
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-size: 28px;
font-weight: 700;
margin-bottom: 5px;
}
Is it somehow assuming the entire second page (including the title) is the body? Halp.
The issue is that on your homepage that text is wrapped in a <h1> element but in the who-we-are page it's wrapped in a <p> element. Your CSS has the rule:
h1, h2, h3, h4, h5, h6 {
margin: 0 0 15px 0;
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-weight: 700;
text-rendering: optimizeLegibility;
color: #1a1a1a;
}
that is applied on the homepage but not on the who-we-are page. Easiest solution would be to update the code or template for the who-we-are page to change the <p> to a <h1> to match the home page.
Home page heading HTML:
<div id="site-identity">
<h1 class="site-title">Direction & Pace</h1>
<p class="site-description">Explore. Experience. Always.</p>
</div>
Who we are heading HTML:
<div id="site-identity">
<p class="site-title">Direction & Pace</p>
<p class="site-description">Explore. Experience. Always.</p>
</div>
The title on the main page is wrapped in a heading tag, so it's getting the correct heading styling:
<h1 class="site-title">Direction & Pace</h1>
However, the title on the about page is wrapped in a <p> tag, so it's getting the body styling:
<p class="site-title">Direction & Pace</p>
How do I make a textarea have the same font as everything else on the webpage?
Currently I have my code:
test.html:
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="testarea">
<textarea></textarea>
</div>
</body>
</html>
test.css:
body { font: 100%/120% Verdana, Arial, Helvetica, sans-serif;}
#testarea textarea { width: 30em;height: 7em;font: inherit;}
Font inherits in Mozilla, but IE7 keeps Courier inside the textarea.
UPD: Apparently inherit does not work in IE for textarea, so I'll go with AlbertoPL's method.
Simply create a textarea element and define your font element there.
textarea { font: 100%/120% Verdana, Arial, Helvetica, sans-serif;}
you can move it out of the body element.
You'll have to define the font twice (once in body and once in textarea) if you don't want to use *.