Is there a way to add a google font into an internal css? Like for profile layouts?
I've tried embedding all three of these, but I can't get it to change the look of the font on my layout. Does google font work for internal css or only external?
<style>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
#import url(http://fonts.googleapis.com/css?family=Dancing+Script);
</style>
The Google Fonts link needs to be embedded in the head element of an HTML or XHTML document. The thing to understand is that Google Fonts are handled through a Content Delivery Network (CDN). That means that Google hosts the fonts for you.
Here is an example they give on their website:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://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>
You can reference the Google Fonts in an external stylesheet instead of internally as shown here.
Related
I am trying to recreate a player that is shown here - https://videojs-http-streaming.netlify.app/
As per the docs, here is my HTML. But quality/resolution control is missing
What needs to be changed in this HTML for that quality/resolution picker to render in the player as shown in the demo page.
<html>
<head>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<video-js id=example-video-hls class="vjs-default-skin" controls>
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-quality-levels#2.1.0/dist/videojs-contrib-quality-levels.js"></script>
<script>
var player = videojs('example-video-hls');
player.play();
</script>
</body>
</html>
videojs-contrib-quality-levels adds the quality selector API, but does not include a UI component.
That example is using videojs-http-source-selector for the menu.
I downloaded Cesiumjs-1.11 and ran the official Hello World tutorial.
I want to run the same example without relying on nodejs as a server. I tried taking the ./Build/Cesium and using it with the example in the same directory.
CesiumJS runs, but I get this error:
SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:://path/to/Cesium/Assets/Textures/moonSmall.jpg may not be loaded.
Error: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:://path/to/Cesium/Assets/Textures/moonSmall.jpg may not be loaded.
at Error (native)
at new p (file:://path/to/Cesium/Cesium.js:433:19773)
at et.createTexture2D (file:://path/to/Cesium/Cesium.js:449:19216)
at H.update (file:://path/to/Cesium/Cesium.js:434:9600)
at S.update (file:://path/to/Cesium/Cesium.js:452:1298)
at m.update (file:://path/to/Cesium/Cesium.js:455:27828)
at vt (file:://path/to/Cesium/Cesium.js:458:15322)
at Ct (file:://path/to/Cesium/Cesium.js:458:18817)
at bt.render (file://path/to/Cesium/Cesium.js:458:25057)
at P.render (file:://path/to/Cesium/Cesium.js:464:4108)
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="Cesium/Cesium.js"></script>
<style>
#import url(Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
What's wrong with this code ?
There's nothing technically wrong with your code and Cesium can work offline embedded into an application without any issues. The problem here is web browser security. If you're just opening the HTML file in a browser, you are still running inside of a sandbox that restricts access to local files, especially when it comes to things like web workers and WebGL. This is preventing required files from being loaded, resulting in an error. This is true in all browsers and you can verify it yourself by temporarily disabling browser security.
For example, in Chrome you can run with the --disable-web-security and the page will load without any errors. Note, in order for this to work you have to make sure no Chrome instance are already running. If you get a warning on startup, you know the option took. There are different options in other browsers (for example IE just prompts you to allow blocked content).
You will still have a problem of missing imagery because the default configuration is expected to run on a server. To fix that, you can explicit define an imagery provider. Here's a complete example that works when web security is disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
#import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net'
})
});
</script>
</body>
</html>
I assume you're ultimate goal is trying to use Cesium embedded in an application? If so, none of these security restrictions will apply. Many people are using Cesium in embedded browser controls with success.
Alright, my question is pretty simple. Suppose I have a homepage that is not linked to any external stylesheets, all its styles being either inline or internal, how do I do so that AFTER the homepage has been downloaded and displayed, the browser then downloads any necessary (specified) external stylesheets. Is this possible?
Thank you.
Try This:
<head>
<script type='text/javascript'>
function addstyle()
{
document.getElementById('style').href='style.css';
}
</script>
<link rel="stylesheet" type="text/css" href="">
</head>
<body onload="addstyle()">
<h1>Welcome</h1>
<p>Hello whats up</p>
<p>Hope you will have a great day</p>
</body>
I have a basic html file. In the file I have an image tag which references a SVG file.
When I view the file in IE10 the page remains blank rather then showing the expected vector image.
The SVG file was made with Inkscape.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<img src="Images/MyLOGO.svg" width="400"/>
</form>
</body>
</html>
What is the best way to troubleshoot this problem?
One reason could be because in IE9+, Chrome and Safari won’t apply stylesheet rules to the SVG if they’re defined in a separate CSS file.
The SVG file must have been invalid. I have replaced it with a different SVG file and all works as expected.
Hey everyone, I was just wondering whether anybody had any experience with displaying svg in ie9 using the embed tag. Below is an example of my code:
<!DOCTYPE html>
<html><head><title>Example</title></head>
<body>
<embed id="E" height="50%" width="100%" src="example.svg">
</body>
</html>
Right now this displays just fine in Firefox, ie 8 with the Adobe plugin, however in ie 9 it just pops up a blank box with an image icon in the top left of the box. Does anybody have any ideas how I could fix this problem?
Althought your snippet includes a HTML5 DocType definition there are other factors which affect exactly how IE9 processes your HTML e.g. HTTP Response Headers (see How Internet Explorer Chooses Between Document Modes)
I think if you force IE9 into Standards mode your SVG will be rendered by IE9; to quickly test this just use the Developer Tools to control Browser and Document modes.
So, if your embdeded SVG now shows you're just left with figuring out what's triggering IE9 to select the wrong Document Mode.
I'm not sure if your question means that you're trying to figure out any way to display SVG in IE9, or specifically only with the <embed> tag. If you just want a way to display SVG in IE9, I recommend embedding SVG directly in XHTML5:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>untitled</title>
<style type="text/css" media="screen">
body { background:#eee; margin:1em }
svg { background:#fff; display:block; border:1px solid #ccc; width:100%; margin:1em -1px }
</style>
</head><body>
<svg viewBox="-500 -500 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
<!-- SVG content here -->
</svg>
<script type="text/javascript"><![CDATA[
var svg = document.getElementsByTagName('svg')[0];
var svgNS = svg.getAttribute('xmlns');
// Access/manipulate your SVG here
]]></script>
</body></html>
If you want to test this technique, here are some examples (on my site) using SVG that work in IE9:
http://phrogz.net/svg/rainbowgrid.xhtml
http://phrogz.net/svg/3-point-circle2.xhtml
http://phrogz.net/svg/stirling_numbers.xhtml
http://phrogz.net/svg/soldiers.xhtml
http://phrogz.net/svg/drag_under_transformation.xhtml
http://phrogz.net/svg/complex_butterfly.xhtml
If this is not what you want, please clarify what your needs are.