Consider the following example
editor css:
.heading{
font-size: 20pt;
font-weight: bold;
font-style: italic;
}
HTML:
<div class="heading"> This is main heading </div>
When I try to remove the bold from whole whole text inside the heading div it won't convert it to normal text. This might be because of the font-weight defined in heading class. Is there a way to toggle the font-weight for such cases?
Are you just trying to change the font-weight back to normal? If so, just delete that line of CSS, or set the property to font-weight:normal;
To get ride of this issue we moved font styling (bold, italic) out from CSS and used the <strong> and <i> tags directly into the content. This seems to be only proper way to do this.
Related
The three horizontal lines of the hamburger icon render as "X" on a few mobile phones. In other mobile phones and desktop the hamburger icon renders correctly as three horizontal lines. To be more specific it is on all XIAOMI mobile phones on all browsers.
The <Head> code is
</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
And the <Body> code is
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰Menu</div>
<div class="site-name">ABCD</div>
I had to insert an ugly text "MENU".
Snapshot attached.enter image description here
The symbol you're seeing - which looks a bit like an X in a box - is the Android symbol for "I can't find this character in my built in fonts."
You need to provide a font - or Icon Font - for that specific character (U+2630).
As for why Xiaomi doesn't support that... It might be because ☰ is the Chinese "trigram for heaven" symbol. They might not have included Chinese fonts on a non-Chinese phone.
You could instead draw the icon with CSS instead of hoping that each client has the font.
.hamburger {
display: inline-block;
}
.hamburger span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
}
<div role="button" class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
If you're Client doesnt have a certain Font, there are certain ways to fix it:
Use a font CDN my prefered choice to use Font-Awesome
Deliver Font on Request
Use a font CDN
As this method is more suitable, as you are not trying to include a random font, but you want to use a font to display Icons. I suggest you to use FontAwesome. It only provides many more fun and free icons to use.
Just include it as descriped in their start page:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
To use the Hamburger Icon, just do it like this:
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger"><i class="fas fa-bars"></i><span>Menu</span></div>
<div class="site-name">ABCD</div>
The <i class="fas fa-bars"></i> Part includes the Icon. The fa-bars class is used to reference the specific FontAwesome Icon. For example change it to fa-caret-down to see this icon.
Note that im not sure, if your hamburger css class is needed anymore, as you haven't shared its code yet. Just being said, that this solution will include the icon without any more css.
Deliver Font on Request
Just Upload your font to the wwwroot/font folder and link it in your css:
/*default version*/
#font-face {
font-family: 'lovelyFont';
src: url('fonts/lovely_font.eot');
src:
local('Lovely Font'),
local('Lovely-Font'),
url('fonts/lovely_font.otf')
format('opentype');
}
/*bold version*/
#font-face {
font-family: 'lovelyFont';
src: url('fonts/lovely_font_bold.eot');
src:
local('Lovely Font Bold'),
local('Lovely-Font-Bold'),
url('fonts/lovely_font_bold.otf')
format('opentype');
font-weight: bold;
}
/*container element*/
div { font-family: 'lovelyFont', sans-serif; }
/*span elements inside the container div*/
span { font-weight: bold; }
be sure to check out the link for this one.
Summary
I'd clearly go with the CDN / FontAwesome Approach, as it provides much more usability. Browse for any Icon you'd like and just easily include it. On the other hand, it also adds a new dependency to your project, which is not alaways a desired choice.
If so use the approach to Deliver your own font. Make sure it contains the Icons you need and you're good to go. This solution would be best to use, if you really needed to provide your very own font. It could also be containing a simplified version of your companys logo or whatever.
I hope this clears things up for you. If you're interested in why your current solution doesn't work have a look at terence eden's Answer.
I am trying to use a custom font in a webpage. I however know next to nothing about HTML5 and CSS. I want 1 h1 tag to have a custom font. I have the .ttf file in the same folder as the webpage. I tried this with no success:
<h1 style="text-align: center"; font-family="MinecrafterReg.ttf">Welcome to Ben's Minecraft</h1>
Could anyone else help me?
Stick this in the style tags:
#font-face {
font-family: MinecrafterReg;
src: url(MinecrafterReg.ttf);
font-weight:400;
Then stick this in the h1 tag:
<h1 style="text-align: center; font-family: MinecrafterReg">Welcome to Ben's Minecraft</h1>
Nowadays you can place an #import at the top of your style block:
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
This is not how you should use a custom font on a website. First, you should use an external style sheet and have all your CSS in that. Using inline styles is not a great practice. Second, I do not think you can link to a .ttf file as you want. Notice also that your code had wrong inline format. font-family: not =. Also, the whole inline style needs to be in quotes. style="text-align: center; font-family: 'Sigmar One', cursive;"
That being said - you could link your font in your 'head' of your document and then use inline styles to style h1. Here is a way to do it with a google font. Hope this helps!
<head>
<link href='https://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>
</head>
<h1 style="text-align: center; font-family: 'Sigmar One', cursive;">Welcome to Ben's Minecraft</h1>
font-family:url('https://s3-xxxxxxxxxxxxxx/fonts/FloydsnirLTStd-Rmands.otf'); in Inline style css
I have some rather complicated CSS, but the gist is that I have this:
font-family: Arial, Sans-serif;
font-size: 12px;
font-weight: bold;
There are no other font-weight modifiers in my CSS except normal and bold. Chrome works just fine.
IE11 -sometimes- renders this as Arial, but other times as Arial Black. This is on the same page. I tested this on our test Windows 8 box, and it is always the same text that ends up in Arial Black.
Is there any way to prevent this from happening?
OK, this is really silly, but I found out why it is happening.
My element was contained in a html B element, which gets it's own font-weight in IE, overriding the font-weight I set.
IE somehow changes the font in the B element by default. Manually setting font-weight:bold fixed the issue.
It looked like this:
<span style="font-family:Arial; font-weight:bold"><b>text</b></span>
I have this problem:
body{
font-family: 'MyFontFace-font', 'Lucida Grande', Tahoma, Verdana, Arial, etc.
}
H1 {
font-family: 'MyFontFace-font2'
}
And my question is: If the second font ('MyFontFace-font2') is not loaded, will H1 have the font inherited from body, or from default of browser?
Thanks a lot.
The default fallback fonts of the browser will be applied, and any setting on body is ignored.
When you assign a value to a property of an element, like font-family to h1 here, then inheritance will never apply to that property on that element (except, trivially, if you assign the value inherit and the browser supports that). This is not changed by casual things like the value specifying a nonexistent font.
I also tested this with the following simpler document (on a system that has no font named MyFontFace-font2 but has a font named Tahoma):
<!doctype html>
<title>Test5</title>
<style>
body{
font-family: Tahoma;
}
H1 {
font-family: 'MyFontFace-font2'
}
</style>
<h1>Hello world</h1>
In Chrome, Firefox, IE the result is that the browser’s default font is used, not Tahoma. This is the expected result, by the specifications.
If the rule on H1 is omitted, then Tahoma is used, due to inheritance – then the h1 element will inherit the font-family property from its parent.
We have a heading element styled as:
<div class="sidebarHeadingFont">Operation</div>
.sidebarHeadingFont {font-family: Arial, Helvetica, sans serif; font-size:10pt; font-weight:bold; color: #003366; }
In Chrome when you put your mouse over this element the font size increases (making the width of the element bigger) and the color changes to white. Why is this?? Doesn't do this in IE or Firefox.
Are you really, really sure you don't have any other css and/or html? Cause it sounds really, really strange..