css - Why the browser is not using the default font when no font is specified in the HTML? -


i didn't specify font rules in css of html document

enter image description here

and firefox choose segoe ui font render text with

enter image description here

despite it's default font times new roman enter image description here

i thought might os , google chrome using times new roman doesn't seem os.

enter image description here

why firefox not using times new roman (the default font) ? .

div#hometpl-body{  	color:black;  	vertical-align:top;  }  div#hometpl-body img{  	height: 150px; width: 225px;  }  div#hometpl-body div#proposals{  	color: #ccff33;  }    div#hometpl-body span#intromsg{  	vertical-align: top;  	margin-left: 10px;  }  div#hometpl-body div#proposals span.home-highlight{  	font-weight: bold;  	color: #ccc133;  }  div#hometpl-body div#proposals li:nth-child(2){  	list-style-type:none;  	height: 20px;  }
<!doctype html>  <html>  <head>  <title></title>  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>  </head>  <body>  	<div id='header'>  		<div id='header-first'>  		</div>  		<div id='buttons'>  			<div></div>  		</div>  	</div>  	<div id="alerts">  		<div></div>  	</div>  	<div id="page" class="page">  			<div id="hometpl-body" class="body">              	<img src="/public/media/plant.jpg"> <span id="intromsg">hi, test font</span> <br> <br>              	<div id="proposals">              		proposals              		<ul>                  		</ul>              	</div>              </div>  	</div>  	<div id='footer'>  		<div>  		</div>  	</div>  </body>  </html>

i added snippet minimal html , css can reproduce problem @jon uleis asked in comments. when open stackoverflow page firefox, see font used firefox snippet segoe ui why my firefox showing in segoe it's default font times new roman?

update

after @jon uleis posted link plain page without font style surprised it's rendered in times new roman in firefox ! . downloaded page , tested on localhost . it's segoe ui again. after one-factor-tests figured out factor makes firefox shows segoe ui . when set content-type in http header utf-8 firefox render text in segoe ui (only if no css font rules specified)

header("content-type: text/html;charset=utf-8"); //php // firefox render in segoe ui

when clear header @ or set utf-8 renders in times new roman

header("content-type: text/html"); //no charset header("content-type: text/html;charset=abcdefg"); //no utf-8 // firefox render in times new roman

any why firefox doing ?

update

it seems firefox using default font os locale "ar" arabic. has these settings in firefox about:config 

arabic characters settings in firefox proportional: sans-serif serif: times new roman sans-serif: segoe ui

and pages has decided it's character encoding utf-8 in content-type header

and pages didn't decide character encoding in , browser using it's default interface locale (english) has these settings

latin characters settings in firefox proportional: serif serif: times new roman sans-serif: arial

i don't know why firefox changed behavior, started notice problem after it's last update in 16-aug-2017 (v:55.0.2). fix problem may change os locale or change browser "ar" locale font settings use times new roman. leave settings , specify tnr font in document css.


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more